标签: parallax

我正在使用stellar.js为垂直滚动网站添加视差效果,但我遇到了背景位置问题.当我使用"data-stellar-background-ratio"类在div上添加视差效果时,我无法通过CSS将背景位置设置为右侧.无论如何,所有背景图像都会向左移动.我尝试使用网站上提供的位置属性插件语法,但它似乎以某种方式打破了视差效果.有谁能够帮我？谢谢!

我正在构建一个由4个div组成的单页网站,一个在另一个上面,每个都有自己固定的背景图像.这些图像比屏幕宽得多,因为我想在网站上保持其在各种屏幕尺寸上的外观,但是有人知道如何真正地居中背景图像.因此,在小型显示器中,他们将查看图像的中心,并且在更大的显示器中,他们将看到图像的相同位置,只是周围更多.就像这个网站一样

http://www.cantilever-chippy.co.uk/

调整窗口大小时,背景图像会相应移动.

非常感谢.

我在这个网站上提出问题时非常陌生,但是从阅读中学到了很多东西,所以非常感谢!

一点点随机,在这个页脚上看到了这个令人敬畏的"地毯下"风格的视差效果 - 并寻找一些关于它如何被敲掉的指针？

http://ideaware.co/our_work

任何帮助非常感谢!

我正在使用jQuery库stellar.js在我正在构建的网页上创建一些视差样式滚动.到目前为止,我一直没有遇到什么问题,但是我似乎无法解决这个问题.

我有4个div作为视差的幻灯片,宽度和高度为100%,因此它填满了屏幕.然后我在内部使用一个设置宽度(940px)的"包装",以便将视差元素包含在其中,这将阻止不同显示器尺寸之间出现任何问题.

我遇到的问题是,当我给这个包装器中的任何元素一个"数据 - 恒星比率"时,除了一个之外,它会导致元素的行为不同,并且在调整窗口大小时将它们定位不同,例如查看它在不同尺寸的显示器上:

以下是我的代码示例:

HTML

<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
  <div class="wrapper">
    <img src="images/slide1/big_solution_button.png" data-stellar-ratio="1" data-stellar-vertical-offset="-45"alt="">
    <img src="images/slide1/tailored_text.png" data-stellar-ratio="1" data-stellar-vertical-offset="-35"alt="">
    <img src="images/slide1/button.png" data-stellar-ratio="2" data-stellar-vertical-offset="35"alt="">
    <img src="images/slide1/blur_button.png" data-stellar-ratio="0.5" data-stellar-vertical-offset="35"alt="">
  </div>    
  <a class="button" data-slide="2" title=""></a>
</div>

CSS:

有没有人对此有任何见解？

这个网站在Safari的每个浏览器中都运行顺畅,因为它没有"RequestAnimationFrame".请注意,元素是使用JavaScript定位的,如果没有它,可能无法完成.在Safari上,我必须使用window.onscroll刷新元素的位置,这不会产生流畅的结果.

我怎么解决这个问题？

我正在一个有着奇特的视差滚动背景的网站上工作,并按照Mohiuddin Parekh的教程(可在这里找到)

这是我的javascript:

$(document).ready(function(){
// Cache the Window object
$window = $(window);

 $('section[data-type="background"]').each(function(){
 var $bgobj = $(this); // assigning the object

  $(window).scroll(function() {

    // Scroll the background at var speed
    // the yPos is a negative value because we're scrolling it UP!                              
    var yPos = -( ($window.scrollTop() - $bgobj.offset().top) / $bgobj.data('speed'));

    // Put together our final background position
    var coords = '50% '+ yPos + 'px';

    // Move the background
    $bgobj.css({ backgroundPosition: coords });

 }); // window scroll …

我正在制作我的第一个视差页面,我在callmenick上找到了一个简单的例子.

他将自己设定parallax.section为600px高.这也是图像的容器.

<section class="module content">
  <div class="container">    
    <h2>Lorem Ipsum Dolor</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  </div>
</section>

<section class="module parallax parallax-2">
  <div class="container">
    <div class="test">Test container</div>
    <h1>Rise</h1>
  </div>
</section>

我在testdiv中添加了一个div container,margin-top: 30px;我预计它会在我的测试div和容器div之间创建一个30 px的边距.相反,它会在节div之间产生间隙.这是为什么？

如果我添加overflow: hidden到containerdiv,我解决了这个问题.但我仍然不明白为什么边距不能在其他div中运行.

你可以在这里看到我的小提琴.

使用的CSS是这样的:

section.module.parallax {
  height: 600px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

section.module .test{
    margin-top: 40px;
    background-color: #BCEF2F;
}

用jquery写了视差.
我的javascript技巧很糟糕.
你能把我的代码放到vanilla js的方式吗？

https://jsfiddle.net/Islam_Ibakaev/yqb2sbgc/15/#username

$('#intro').on('mousemove', function(e) {
        var w = $(window).width();
        var offsetX = 0.5 - e.pageX / w;
        var moon = $(this).find('.moon');
        var buildings = $(this).find('.buildings');
        var offsetForM = parseInt(moon.data('offset'));
        var offsetForB = parseInt(buildings.data('offset'));
        var translateM = "translate(" + Math.round(offsetX * offsetForM) + "px";
        var translateB = "translate(-" + Math.round(offsetX * offsetForB) + "px";
        moon.css({
            '-webkit-transform': translateM,
            'transform': translateM,
            'moz-transform': translateM
            });
       buildings.css({
            '-webkit-transform': translateB,
            'transform': translateB,
            'moz-transform': translateB
            });

    });

类似于这个未解决的问题(jQuery - parallax - 正确更新背景位置)

我正在动画页面滚动上元素的transform属性,以实现类似视差的效果.我希望这个元素只在视图中开始动画.现在的问题是,如果元素出现在页面的下方,它已经向上移动很多并且失去了效果.

这是我目前的代码

function parallax() {
  var scrolled = $(window).scrollTop();
  $('[data-scroll]').css('transform', 'translateY('+-(scrolled*0.02)+'px)');
}

$(window).scroll(function(e){
  parallax();
});

我试图只用CSS3创建视差效果,但不幸的是我无法,简单的结构是一个div与图像和一个div与内容,我不能在背景中使用图像.

注意:请不要建议任何JS解决方案和背景图像解决方案,因为我只是尝试使用CSS3和图像标记来处理它DIV

任何人都可以建议如何处理这个？这是JSfiddle

.image-div{
        width: 100%; 
        float: left;
        -webkit-perspective: 1px;
        perspective: 1px;
        -webkit-perspective-origin: center top;
        perspective-origin: center top;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        position: relative;
    }
    .image-div img{
        width: 100%; 
        height: auto;
    }
    .content-div{
        width: 100%;
        background: #fff; 
        float: left;
        position: relative;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);

    }

<div class="image-div">
        <img src="https://pbs.twimg.com/media/B2XTRwtCAAEnqlP.jpg:large">
    </div>
    <div class="content-div">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet
            lacus accumsan et viverra justo …