1
我正在做一个项目,它需要基本上复制网站标题的字母随滚动一起移动的效果(完全像这里:https://en.playkot.com/,这个词PLAYKOT)。视差滚动移动字/字母
你有什么想法,当字母在滚动期间,以不同的方向和不同的长度移动时,我该如何实现这种效果?我不确定scrollmagic和/或tween之间的相互作用。
我正在做一个项目,它需要基本上复制网站标题的字母随滚动一起移动的效果(完全像这里:https://en.playkot.com/,这个词PLAYKOT)。视差滚动移动字/字母
你有什么想法,当字母在滚动期间,以不同的方向和不同的长度移动时,我该如何实现这种效果?我不确定scrollmagic和/或tween之间的相互作用。
我设法解决了这个问题,看看这里: 使用全页面视图(最好在我的CODEPEN),以便正确看到效果,因为这不是(但可以很容易地变成)响应版本。
jQuery(document).ready(function($) {
var $main = $("#header");
var $header_container = $(".header-container");
var $image = $(".h-image");
var $parallax_word = $(".parallax-word");
var $pw_item = $(".pw-item");
var winH = $(window).height();
var controller = new ScrollMagic.Controller();
var scene1p = new ScrollMagic.Scene({
\t duration: winH
});
var tween1 = new TimelineMax();
tween1.to($main, 1, {
y: -winH/4,
ease: Linear.easeNone
});
scene1p.setTween(tween1);
controller.addScene(scene1p);
var scene2p = new ScrollMagic.Scene({
\t duration: winH
});
var tween2 = new TimelineMax();
tween2.to($image, 1, {
\t opacity: 0.65,
ease: Linear.easeNone
});
scene2p.setTween(tween2);
controller.addScene(scene2p);
$pw_item.each(function(index, element) {
\t var $symbol = $(this);
\t var shiftH = $symbol.data("shift");
\t var tweenI = new TimelineMax();
\t tweenI.fromTo($symbol, 1, {
\t \t y: shiftH * winH/2
}, {
y: 0
});
\t var scenep = new ScrollMagic.Scene({
\t \t duration: .7 * $main.height()
\t });
\t scenep.setTween(tweenI);
\t controller.addScene(scenep);
});
var scene4p = new ScrollMagic.Scene({
\t duration: winH
});
var tween4 = new TimelineMax();
tween4.to($parallax_word, 1, {
y: -winH/5,
ease: Linear.easeNone
});
scene4p.setTween(tween4);
controller.addScene(scene4p);
\t });
#header {
background-color: #ebebed;
position: fixed;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.header-container {
background: #000;
opacity: 1;
height: 100%;
transition: opacity .35s;
transition-duration: .175s;
}
.header-background, .header-background .h-image {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.header-background {
z-index: 0;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.header-background .h-image {
background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(http://eskipaper.com/images/universe-background-1.jpg);
background-size: cover;
background-position: 80% 80%;
position: relative;
display: block;
left: 0px;
top: 0px;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.parallax-word {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 20%;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 1;
}
.pw-item {
position: relative;
width: 120px;
height: 200px;
z-index: 1;
}
.pw-item.pw-item-1 {
width: 110px;
}
.pw-item.pw-item-2 {
width: 140px;
}
.pw-item.pw-item-3,
.pw-item.pw-item-4 {
width: 140px;
}
.pw-item.pw-item-5.pw-item-shift {
width: 120px;
}
.pw-item.pw-item-6 {
width: 160px;
}
.pw-letter {
font-family: 'Arial';
font-size: 160px;
font-weight: 700;
color: #fff;
line-height: 1;
position: absolute;
display: block;
left: 0px;
top: 0px;
transform-style: preserve-3d;
backface-visibility: hidden;
opacity: 1 !important;
}
.symbol {
display: block;
opacity: 1;
}
#body_content {
background-color: #000;
height: 2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
<div id="project"> \t
<section id="header"> \t
<div class="header-container">
\t \t \t <div class="header-background">
\t \t \t \t <div class="h-image"></div>
\t \t \t </div>
\t \t \t <div class="parallax-word">
\t \t \t \t <div class="pw-item pw-item-1" data-shift="-0.25">
\t \t \t \t \t <div class="pw-letter h-image">
\t \t \t \t \t \t <span class="symbol">y</span>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="pw-item pw-item-2" data-shift="0.15">
\t \t \t \t \t <div class="pw-letter h-image">
\t \t \t \t \t \t <span class="symbol">w</span>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="pw-item pw-item-item_3" data-shift="-0.3">
\t \t \t \t \t <div class="pw-letter h-image">
\t \t \t \t \t \t <span class="symbol">e</span>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="pw-item pw-item-4 pw-item-shift" data-shift="0">
\t \t \t \t \t <div class="pw-letter h-image">
\t \t \t \t \t \t <span class="symbol">t</span>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="pw-item pw-item-5" data-shift="-0.35">
\t \t \t \t \t <div class="pw-letter h-image">
\t \t \t \t \t \t <span class="symbol">k</span>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t <div class="pw-item pw-item-6" data-shift="0.15">
\t \t \t \t \t <div class="pw-letter h-image">
\t \t \t \t \t \t <span class="symbol">a</span>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t </div>
</div>
<div id="body_content">
</div>
</div>
谢谢大家的关心! :-)我希望它能帮助别人。 PS:这个片段是一个更大项目的一部分,所以可能会有一些未使用的部分,对此抱歉,但这个想法应该是非常明显的。
顺便说一句,我发现这个https://codepen.io/vinsongrant/pen/XJLMjX,但我不知道如果这是方向去。 –
看起来像您找到的Codepen是一个很好的起点。 –
你可以证明你到目前为止有什么?这有助于了解究竟是什么问题以及你卡在哪里。你发布的codepen看起来像一个好开始,如果我把你的权利。 – Fix3r