fade/slide in elements on scroll on mobile
-
I found this useful post about fading in elements: fade in elements on scroll like on http://meireundmeire.com/category/selected-projects/
However it does not work on mobile – is there a way to make it work? Like on e.g. http://meireundmeire.com
Any input on this would be much appreciated.THX!
As I only want it to slide in images I have changed the js script and added the .slideUp class to images in the gridder.
javascript:
<script>
var $items;
var doScroll = function(){
$items.each(function(ix){
var rect = this.getBoundingClientRect();//above viewport if(rect.top+rect.height < 0){ jQuery(this).addClass("above").removeClass('below transition-in'); } //below viewport else if(rect.top > window.innerHeight){ jQuery(this).addClass("below").removeClass('above transition-in'); } // in viewport else{ jQuery(this).removeClass('above below').addClass("transition-in"); } }); }; window.laytheme.on("newpageshown", function(){ setTimeout(function(){ $items = jQuery(".slideUp"); },0); }); jQuery(window).on('scroll', doScroll);
</script>
CSS
.slideUp.above{
transform: translateY(-200px);
opacity: 0;
}.slideUp.below{
transform: translateY(200px);
opacity: 0;
}.slideUp.transition-in{
transform: translateY(0);
opacity: 1;
}.slideUp{
transition: transform 0.5s cubic-bezier(0.165, .84, .44, 1), opacity 0.5s cubic-bezier(0.165, .84, .44, 1);
} -
@jensdan I found out it worked as soon as I made a custom phone layout and added the slideUp class.
-
Before you post
Use the Search Feature. Maybe there is already a solution to your issue.
1. Update Lay Theme and all Lay Theme Addons
2. Disable all Plugins
3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
4. Now see if your problem solved itself
5. Go here, see if your problem is listed here:
Troubleshooting
When you post:
1. Post a link to where the problem is
2. If the problem is difficult to explain, post screenshots / link to a video to explain it