parallax

问题 My website is using Stellar.js to create a parallax effect on a number of images that cover the width of the users screen. Stellar scrolls across the image at half the speed the user scrolls down the page creating a nice effect. I originally used this code: MY CSS FILE /* Separator About - Parallax Section */ .sep { background-attachment: fixed!important; background-position: 50% 0!important; background-repeat: no-repeat!important; width: 100%!important; height: 180px!important; position:

问题 Closed . This question needs details or clarity. It is not currently accepting answers. Want to improve this question? Add details and clarify the problem by editing this post. Closed 3 years ago . I was looking for a long time (looking on third-party libraries also) to make some kind of "Parallax" but without Toolbar , All I've seen is working with Toolbar , but it's not in my best interest, because I removed Toolbar on whole application. I followed this example: https://www.youtube.com

问题 Goal: I'm trying to create a parallax scrolling effect. The parallax-container are implemented like so: < div class="parallax slide-1" > < /div > I need the parallax effect to start, when its container is scrolled into view . Once it has left the view , the effect needs to stop. The Problem: The jQuery works fine so far. But: Since I can have multiple parallax-container on one page (e.g. one at the top + one at the bottom) I need them to be treated independently by jQuery. At the moment the

问题 I've been reading around all day without any success on this. Basically want to be able to set an ImageView inside a android.support.design.widget.CollapsingToolbarLayout to change it's height depending on the onOffsetChanged change detected so that it will "zoom-out" when collapsed to fit the whole image width and "zoom-in" when expanded to do normal centerCrop behavior. I tried setting the ImageView height in the onOffsetChanged but that causes other issues assuming due to the

问题 Sorry If my tone is not good, I am using this code in a web page. HTML: <a class="second" href="#nav1">Home</a> <a class="second" href="#nav2">About</a> <a class="second" href="#nav3">Contact</a> <section id="nav1" data-speed="4" data-type="background"> <article>Big Tech Ideas Page3</article> </section> <section id="nav2" data-speed="4" data-type="background"> <article>Big Tech Ideas Page3</article> </section> <section id="nav3" data-speed="4" data-type="background"> <article>Big Tech Ideas

问题 I've spent my entire day trying to create a Parallax section that works fine no matter where it's placed on the page, but every change I make to the code solves one problem and creates another. Here is my code so far: (function( $ ) { "use strict"; $('.parallax-section').each(function(){ var $el = $(this), speed = 0.4, elOffset = $el.offset().top; $(window).scroll(function() { var diff = $(window).scrollTop() - elOffset; var yPos = -(diff*speed); var coords = '50% '+ yPos + 'px'; $el.css({

问题 I'm certain this has been brought up in the past; however I'm at a loss for a term. On this web page for square, the user scrolls through the section titled "At Square, different disciplines collaborate to design beautifully simple solutions."and the animation is activated to the right at that specific point on the page. As the user scrolls back the image reverts and so on. How are they achieving this? AUG 2013: So it's been nine months since I've asked this question and parallax scrolling

问题 I have the carousel effect working, but I don't know how to make the text and images move at different speeds as shown in this banner for IBM: http://www.ibm.com/us/en/ Here's my jQuery: $.fn.zinCarousel = function(settings) { var settings = $.extend({}, $.fn.zinCarousel.defaultSettings, settings || {}); return this.each(function() { var o = $.extend(true, {}, settings), $elem = $(this), caro = new Carousel(o, $elem); caro.init(); }); }; jsFiddle Demo (Remove /show/ from URL to access edit

问题 Can anyone point me in the right direction? I have a DIV with a background image that is fixed, but I'd like it to scroll at a slower rate when scrolling down the page. I'm not great with jQuery or CSS3 so asking for some help. Thanks in advance. 回答1: This may help: http://stephband.info/jparallax/ It turns nodes into absolutely positioned layers that move in response to the mouse. 回答2: http://potentpages.com/parallax-scroll-tutorial/ Here is a tutorial that my company and I created

问题 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