-
Posts
-
Hello,
I would like to make a page exactly like this one using Enfold:
http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creekI would want to use a full page video with a text banner superimposed, just like the above link, and then have the video scroll up but keep playing, again just like this page… and then as the user scrolls down, another video assume a background with text of the page in the foreground, again just like this page from the NY times. Can Enfold do that?
If so, can you tell me which content elements I should use and generally how I should configure them? Do I put them inside other elements?
Thanks!!
Hi @goldengate415 ;
Yes you can have it by using ;
Color Section (Layout Elements),
– In section Layout : chose the height, padding, borders …
– In Section Background : add your video “Background Video”,
– In Section Backgroudn Overlay : chose or not an overlay color.Thanks much! Perfect timing as I am just working on this now.
Doing that, how do you then superimpose text over the video? I would like to include a banner like in the New York Times example.Thanks!
Hi!
You can add any element inside your color section element to display banner :)
@begrafiks thanks as always :)Regards,
YigitHi @goldengate415 ;
If you would like to have a text layer, you should look into “Fullscreen Slider” then.@Yigit when I have tried that in the past, I have a difficult time specifying exact location of text inside the color section.. any tips on how to place the text? Does that require CSS expertise?
@begrafiks thanks, I tried the fullscreen slider and that it working much better! I could not figure out how to do the effect you see on the NY Times page as you start to scroll down from the top… I like how the video starts to fade out as the text fades in. It looks like they are doing a semi transparent white overlay to get that effect?Here’s the page I am working on….
http://www.thomashenthorne.com/1292-sanderling-island-point-richmond/I also can’t figure out how to get the video to loop… I tried the &loop=1 on the url parameter but that didn’t work.
Thanks so much!!
Rob
Hi!
Add this in the functions.php file:
// fade add_action('wp_footer', 'ava_custom_script'); function ava_custom_script(){ ?> <script type="text/javascript"> (function( $ ) { $( window ).scroll(function( i ){ var scroll = $( window ).scrollTop(); $( '.avia-fullscreen-slider' ).css( { 'top' : .7 * scroll } ); $( '.avia-fullscreen-slider' ).css( {'opacity' : ( 1000 - scroll ) / 100 / 10 } ); }); })( jQuery ); </script> <?php }If you want to apply this to a specific slider, turn on the custom css class: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
Cheers!
IsmaelHi!
My customer also wants an effect like the one in the link above (NY Times). Or similar to Apple, where the content slides over a video from bottom to top when scrolling. I’ve already tried that using the tips in the thread. But I can’t manage it. Can you please help me?Attached is the data. It’s about the start-page (my experiments are also stored there).
Thank you very much and sunny greetings,
DanielaHi,
Would you mind providing a screenshot of the effect that you’d like to copy? You can use platforms like Savvyify, Imgur or Dropbox to upload and share the screenshot. Here are the steps to follow:
1.) Visit the website of your chosen platform, such as Savvyify, Imgur or Dropbox.
2.) Locate the option to upload a file or an image.
3.) Select the screenshot file from your computer or device and upload it to the platform.
4.) After the upload is complete, you will be provided with a shareable link or an embed code.
5.) Copy the link or code and include it in your message or response to provide us with the screenshot.Thank you for taking the time to share the screenshot. It will help us better understand the issue you’re facing and provide appropriate assistance.
Best regards,
IsmaelHi and sure, but a screenshot won’t help. That’s why I’m sending a short video. It should also have the same effect as the link from the NY Times (in the first Chat above: http://www.nytimes.com/projects/2012/snow-fall/#/?part=tunnel-creek
To my Video: Instead of people’s pictures, a video should be stored. The text should go over the video when scrolling. The video is fixed.
Then another video should play in the background (instead of the flowers, a moving video – also fixed again).I can do this with pictures – but how do I get a video fixed in the background?
Thank you very much and best regards
so we can misuse the overlay option of enfold on that – to have all DOM elements we need. Because if you use it – enfold will generate an av-section-color-overlay container.
The settings there are not for us important – just the fact that a container is created in the right position.See: https://webers-testseite.de/snowfall-video/
for even more usability it might be nice to have an observer if the section is in viewport or not – my script now only is working with scroll top value and a given range to top ( here in my example 400px)
if that is o.k. for you just scroll to the end of the page to see code-snippet.
Trick is to use a huge inset shadow with rgba values – and the scroll amount will influnce the a-value of that color.
Many thanks for the quick response!
I’m not entirely sure if that’s the right effect… On my Site the video should start directly on the homepage. And when you continue scrolling, the text should go over the video (that ist the question how i can fixed it) – and the video should not scroll along.
In your link the page starts with text and the video also scrolls with…Do you think that is the way?
Kind regards,
Danielayes – afaik – enfold got no option to have fixed background videos for color-sections.
but we can set it with quick css to fixed when reaching the top.
see following example page : https://webers-testseite.de/snowfall-video-3/but as you can see – your example page from ny goes on mobile view to scroll the video bg !
on desktop view – first is to place it absolute – reaching the top will go to fixed positioning.Good morning – and thank you.
I probably still have a mistake in my thinking. I inserted the code using the “Code Snippet” plugin. On the homepage, I gave the color section where I stored the video a color overlay. With the class “.fade-video”. Is this the right way?
Nothing is happening so far.On the homepage you can see that I have already tested different methods – including the layer slider. I couldn’t achieve the effect there either – but it will probably work there.
Kind regards,
Danielai do not see your page becaue:
just to be sure; you have already entered the class without the dot in the custom class input field?this is not the url? then tell me the right one:
Here’s the page I am working on….
http://www.thomashenthorne.com/1292-sanderling-island-point-richmond/or @beyond-flora : did you hook into that post of goldengate? I do not see private content fields (as Participant)
Yes! That’s not the right URL – I’ve already sent it to you three times as private content – just like that
or @beyond-flora : did you hook into that post of goldengate? I do not see private content fields (as Participant)
I am a participant like you and just a helpful person. – If the link is not allowed to be made public, then you’ll just have to wait for a helping mod.
I just didn’t pay attention to the age of the original topic. I think it would be better to open a new topic in such a case.
That’s really nice of you, and thank you very much!!! But I don’t want to make the link public because it is customer data.
I will then wait for support from Krisi
Even though it was a long time ago, @Ismael has already replied here as a moderator
Hi,
Have you tried using the Fullscreen Slider element instead of the Color Section? You can set the Advanced > Slider Animation > Slideshow Image scrolling to Parallax and add the script that we previously suggested to make the slider fade on scroll.
Best regards,
IsmaelI’ll leave the page online, maybe you can make friends with the solution after all ;)
Hi,
When I check your homepage I see that you added the dot in the custom class in the color section, this will cause an error, whenever you add a custom class please do not add the dot:
I removed it for you and activated the script and it now works. But since the color section is at the very top when you page loads you will only see a white area until you scroll. This solution is meant for sections that are lower that you can scroll into.Please note that since this is not your thread posting your login here will not be private and you will not see anything we write in the Private Content area, in the future I recommend opening a new thread instead of posting in a thread from 2016 :)
Best regards,
Mikehm ?
just to be sure; you have already entered the class without the dot in the custom class input field?
We know the stumbling blocks, and if we ask about them, you should at least make the effort to look for them. Thank you
___________
I removed it for you and activated the script and it now works. But since the color section is at the very top when you page loads you will only see a white area until you scroll. This solution is meant for sections that are lower that you can scroll into.
there is in the snippet an offset called: range
But as Mike allready mentioned – tries to show it like in your example. If you like to have that section on top : just write it in your quest.
And on that page on scroll the video is slowly disappearing there.WOW my old thread has a new life!
FYI, I ended up using Smart Slider Pro to achieve this and other full screen video effects. A lifetime license is very reasonably priced and their support is Enfold level – excellent!
Best
Rob
- You must be logged in to reply to this topic.