parallax

问题 I'm trying to create a parallax effect in firefox by modifying the top position of elements using the onscroll event. I throttled the onscroll event so it doesn't overload the browser and I added a transition top property in the css to make things smoother. This works pretty well in every browser, but firefox is extremely choppy for some reason. Is there any way to make this transition smoother? window.onscroll = throttle(function(){ var scrollDistance = window.pageYOffset || window.document

问题 I implemented the following plugin in into a drupal website https://github.com/linnett/backgroundVideo following their instructions to the T. I am receiving a jQuery uncaught reference error: element is not defined error. This is my site. 回答1: the variable element is supposed to be a reference to your video element. var element = "#TheVideoElementId"; 回答2: According to the github project and also to the examples which are provided, element is just a placeholder for your <video> wrapper. So if

问题 I have several tableview cells which are wider than they are tall. As such, I'm implementing a parallax scroll so you can see more of the image as you scroll up/down Example of desired effect Following some code examples nearly gets me there, but as I'm using AutoLayout, I find there is a 'jump' when you first start scrolling, due to the difference in actual image positions and the expected position. I've tried calling the layout function on both viewDidAppear and didLayoutSubviews to try and

问题 So here is some code from a udacity project for Material Design. It is supposed to show a collapsing toolbar that transforms from a photo with text to simple text. The udacity videos lead me to believe the code worked but when I downloaded the app to my phone, the toolbar did not collapse (the OS is android 6.0.1, v23). Is there something I could change to ensure the toolbar collapses? The code xml <android.support.design.widget.AppBarLayout android:id="@+id/app_bar_layout" android:layout

问题 A perfect example of what I am looking to achieve is on this page as soon as you land on it (parallax BG, text fades, and text is parallaxed):themenectar.com I am using parallax.js for my backgrounds which works great. I am also using this snippet below which fades my title out on scroll: function scrollBanner() { $(document).scroll(function(){ var scrollPos = $(this).scrollTop(); $('.page-title, .breadcrumbs').css({ 'opacity' : 1-(scrollPos/200), }); }); } scrollBanner(); Everything works

问题 Goal This is a follow-up question to this one. I'm trying to create a parallax scrolling effect. The parallax-container are implemented like so: < div class="parallax slide-1" >< /div > The parallax-effect successfully starts, when a container is scrolled into view and stops, when it has left the view . Problem Unfortunately when I place a parallax-container further down on a page the effect starts with the backgroundposition in the wrong place . I understand why this problem shows up, but am

问题 Is there some kind of plugin or framework I can use to copy the functionality found on http://bagigia.com? I know I can WGET the entire source but the demand is for something very custom and reverse engineering the several JS files found on Bagigia seems like a bad idea. Or is it? Is it my best option? 来源： https://stackoverflow.com/questions/14287412/scrolling-over-fixed-fullscreen-divs-execute-animated-slides-as-seen-on-bagigia

问题 What is the most efficient method for implement an header over a tableView which can animating his frame like in the gif. I need a customizable methods because i would like an header which can became a pageController or similar. Edit: I tried several libraries found on the net and they are different. I need the header remains fixed at the top as in the gif. I tried to modify the examples to accomplish this but had no results. I tried to change the scrollViewdidscroll but I failed because the

问题 I would like to make a hover on my div with a scale effect in the background which use a parallax effect with this jquery script: https://github.com/pixelcog/parallax.js/ But it doesn't work, how I can do? MY JS FIFFLE $('span').parallax({ imageSrc: 'http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/07/background-pictures-2.jpg', naturalWidth: 400, speed: 0.6 }); span { height: 200px; width: 400px; margin: 50px; display: block; position: relative; background-size: 100%; } span:hover {

问题 I am using the Materialize Framework to create a PhoneGap app. http://materializecss.com They have a parallax setting which you can see their notation here: http://materializecss.com/parallax.html When I run it, my image does not show up at all. My html looks like this: <div class="row"> <div class="col s12 m7"> <div class="card"> <div class="parallax-container" style = "height:100px;"> <div class="parallax"><img src="/img.png"></div> </div> <div class="card-content"> <h5> test</h5> <h6> test