I want to make it so that when scrolling, the block with the block-1 class changes its position to the right, that is, when scrolling, it moves to the right by 1 pixel
Here is the given code in codesandbox
<template>
<div>
<div class="scroll-block">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quod at
vitae explicabo unde expedita ullam, excepturi accusantium aut aperiam
adipisci consectetur corrupti, perspiciatis, earum ad modi recusandae
numquam tenetur! Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Corrupti distinctio architecto deleniti quas nihil. Illum possimus
accusamus quibusdam quis, repudiandae labore laboriosam nihil odit, vitae
ratione numquam quod cumque aut.
</div>
<div class="block-1"></div>
</div>
</template>
<style scoped>
.scroll-block {
width: 200px;
overflow: scroll;
height: 200px;
background: red;
}
.block-1 {
width: 100px;
height: 100px;
background: yellow;
}
</style>
Just handle scrolling event and change the box position.
<template>
<div>
<div class="scroll-block" #scroll="onScroll">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat quod at
vitae explicabo unde expedita ullam, excepturi accusantium aut aperiam
adipisci consectetur corrupti, perspiciatis, earum ad modi recusandae
numquam tenetur! Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Corrupti distinctio architecto deleniti quas nihil. Illum possimus
accusamus quibusdam quis, repudiandae labore laboriosam nihil odit, vitae
ratione numquam quod cumque aut.
</div>
<div class="block-1" :style="block1Style"></div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
data() {
return {
block1Left: 0,
timerId: null,
}
},
computed: {
block1Style() {
return {
left: `${this.block1Left}px`,
}
}
},
methods: {
onScroll() {
this.block1Left++;
}
}
};
</script>
<style scoped>
.scroll-block {
width: 200px;
overflow: scroll;
height: 200px;
background: red;
}
.block-1 {
width: 100px;
height: 100px;
background: yellow;
position: relative;
}
</style>
Related
I'm building a website with a heatmap on it with heatmap.js by Patrick Wied. I manage to make it work and I'm now recording mouse move events as well as click events. Everything works very well except when I add some content on my website:
The canvas for the heatmap is on the front layer and I can't select any text or click anything.
I tried to put everything else than the canvas with a higher z-index, I can select and interact with my content but this time as the canvas is behind everything else, it does no record mouse events when I'm hovering some content.
I checked the website and repo of heatmap.js as it works perfectly, though I can't find any code or explanation on how to have a similar result. It looks like he isn't even playing with z-index to achieve this result.
Any idea on how to solve this problem?
var heatmapInstance = h337.create({
container: document.querySelector('#heatmap'),
radius: 30
});
document.querySelector('.wrapper').onmousemove = function(ev) {
heatmapInstance.addData({
x: ev.layerX,
y: ev.layerY,
value: 1
});
};
body {
position: relative;
width: 100%
height: auto;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.wrapper #heatmap {
position: relative;
height: 100%;
width: 100%;
}
<script src="https://cdn.jsdelivr.net/npm/heatmapjs#2.0.2/heatmap.min.js"></script>
<body>
<div class="wrapper">
<div id="heatmap"></div>
</div>
<div class="content">
<button> Click me! </button>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur animi ipsum fugit quibusdam excepturi quidem sequi vitae, dolor dignissimos ad rerum neque nam itaque illo perspiciatis eligendi, deserunt repellat in?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur animi ipsum fugit quibusdam excepturi quidem sequi vitae, dolor dignissimos ad rerum neque nam itaque illo perspiciatis eligendi, deserunt repellat in?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur animi ipsum fugit quibusdam excepturi quidem sequi vitae, dolor dignissimos ad rerum neque nam itaque illo perspiciatis eligendi, deserunt repellat in?</p>
</div>
</body>
This is how you dot it, put the content above the wrapper by giving it higher z-index and add an event listener to content for the mousemove. when mousemove is fired on content it will simply froward that event to wrapper beneath it.
var heatmapInstance = h337.create({
container: document.querySelector('#heatmap'),
radius: 30
});
document.querySelector('.wrapper').onmousemove = function(ev) {
heatmapInstance.addData({
x: ev.clientX,
y: ev.clientY,
value: 1
});
};
document.querySelector('.content').onmousemove = function(ev) {
let event = new ev.constructor( ev.type,ev)
document.querySelector('.wrapper').dispatchEvent(event)
};
body {
position: relative;
width: 100%;
height:100vh;
}
.wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.wrapper #heatmap {
position: relative;
height: 100%;
width: 100%;
}
.content{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index:3
}
<script src="https://cdn.jsdelivr.net/npm/heatmapjs#2.0.2/heatmap.min.js"></script>
<body>
<div class="wrapper">
<div id="heatmap"></div>
</div>
<div class="content">
<button> Click me! </button>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur animi ipsum fugit quibusdam excepturi quidem sequi vitae, dolor dignissimos ad rerum neque nam itaque illo perspiciatis eligendi, deserunt repellat in?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur animi ipsum fugit quibusdam excepturi quidem sequi vitae, dolor dignissimos ad rerum neque nam itaque illo perspiciatis eligendi, deserunt repellat in?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur animi ipsum fugit quibusdam excepturi quidem sequi vitae, dolor dignissimos ad rerum neque nam itaque illo perspiciatis eligendi, deserunt repellat in?</p>
</div>
</body>
I'm trying to create a background for my site and it works beautifully on desktop
but the background starts to resize when I scroll in my mobile browser (chrome) mainly because of the browser search bar hiding and reappearing upon scroll.
Is there any way I can prevent my background from resizing?
here's a video of what happens on my mobile: https://streamable.com/0fplj6
here's the code:
html {
height: 100vh;
margin: 0;
width: 100%;
}
body {
margin: 0;
height: 100%;
;
width: 100%;
background-image: url("https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#header {
width: 100%;
height: 50px;
background-color: black;
}
#header img {
height: 6rem;
margin: 1rem;
}
#content {
width: 70%;
margin: auto;
background: yellow;
overflow: hidden;
}
<body>
<div id="header"></div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis necessitatibusaspernatur accusamus, sit exercitationem nostrum itaque sed consequaturperferendis iusto maiores possimus saepe numquam pariatur? Labore excepturitotam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobisnecessitatibus aspernatur accusamus, sit exercitationem nostrum itaque sedconsequatur perferendis iusto maiores possimus saepe numquam pariatur? Laboreexcepturi totam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicingelit. Nobis necessitatibus aspernatur accusamus, sit exercitationem nostrumitaque sed consequatur perferendis iusto maiores possimus saepe numquampariatur? Labore excepturi totam id ipsum. Lorem ipsum dolor sit amet,consectetur adipisicing elit. Nobis necessitatibus aspernatur accusamus, sitexercitationem nostrum itaque sed consequatur perferendis iusto maiores possimussaepe numquam pariatur? Labore excepturi totam id ipsum. Lorem ipsum dolor sitamet, consectetur adipisicing elit. Nobis necessitatibus aspernatur accusamus,sit exercitationem nostrum itaque sed consequatur perferendis iusto maiorespossimus saepe numquam pariatur? Labore excepturi totam id ipsum. Lorem ipsumdolor sit amet, consectetur adipisicing elit. Nobis necessitatibus aspernaturaccusamus, sit exercitationem nostrum itaque sed consequatur perferendis iustomaiores possimus saepe numquam pariatur? Labore excepturi totam id ipsum. Loremipsum dolor sit amet, consectetur adipisicing elit. Nobis necessitatibusaspernatur accusamus, sit exercitationem nostrum itaque sed consequaturperferendis iusto maiores possimus saepe numquam pariatur? Labore excepturitotam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobisnecessitatibus aspernatur accusamus, sit exercitationem nostrum itaque sedconsequatur perferendis iusto maiores possimus saepe numquam pariatur? Laboreexcepturi totam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicingelit. Nobis necessitatibus aspernatur accusamus, sit exercitationem nostrumitaque sed consequatur perferendis iusto maiores possimus saepe numquampariatur? Labore excepturi totam id ipsum.
</div>
</body>
I found a question which was similar
https://stackoverflow.com/questions/24944925/background-image-jumps-when-address-bar-hides-ios-android-mobile-chrome
but it was 6 years old and none of the solutions were working (in pure css)
so is there any solution preferably with pure css? (use vanilla javascript if absolutely necessary)
The main culprit is the background-position:fixed as it was meant to size up to the browser screen (minus the address bar area)
The trick is in using a sticky background.
I tested the below code and it should not resize on scrolling down in the mobile browser
html,
body {
margin: 0;
width: 100%;
max-height: 100%;
max-width: 100%;
}
#header {
height: 50px;
width: 100%;
background: black;
}
#rest {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
background: blue;
}
#content {
width: 50%;
z-index: 0;
grid-row: 1;
grid-column: 1;
margin: 0 auto;
background: yellow;
}
#sticky_back {
width: 100%;
height: 100vh;
grid-row: 1;
grid-column: 1;
position: sticky;
top: 0;
background-image: url("https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg");
background-repeat: no-repeat;
background-size: cover;
}
<body>
<div id="header"></div>
<div id="rest">
<div id="sticky_back"></div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis necessitatibusaspernatur accusamus, sit exercitationem nostrum itaque sed consequaturperferendis iusto maiores possimus saepe numquam pariatur? Labore excepturitotam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobisnecessitatibus aspernatur accusamus, sit exercitationem nostrum itaque sedconsequatur perferendis iusto maiores possimus saepe numquam pariatur? Laboreexcepturi totam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicingelit. Nobis necessitatibus aspernatur accusamus, sit exercitationem nostrumitaque sed consequatur perferendis iusto maiores possimus saepe numquampariatur? Labore excepturi totam id ipsum. Lorem ipsum dolor sit amet,consectetur adipisicing elit. Nobis necessitatibus aspernatur accusamus, sitexercitationem nostrum itaque sed consequatur perferendis iusto maiores possimussaepe numquam pariatur? Labore excepturi totam id ipsum. Lorem ipsum dolor sitamet, consectetur adipisicing elit. Nobis necessitatibus aspernatur accusamus,sit exercitationem nostrum itaque sed consequatur perferendis iusto maiorespossimus saepe numquam pariatur? Labore excepturi totam id ipsum. Lorem ipsumdolor sit amet, consectetur adipisicing elit. Nobis necessitatibus aspernaturaccusamus, sit exercitationem nostrum itaque sed consequatur perferendis iustomaiores possimus saepe numquam pariatur? Labore excepturi totam id ipsum. Loremipsum dolor sit amet, consectetur adipisicing elit. Nobis necessitatibusaspernatur accusamus, sit exercitationem nostrum itaque sed consequaturperferendis iusto maiores possimus saepe numquam pariatur? Labore excepturitotam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobisnecessitatibus aspernatur accusamus, sit exercitationem nostrum itaque sedconsequatur perferendis iusto maiores possimus saepe numquam pariatur? Laboreexcepturi totam id ipsum. Lorem ipsum dolor sit amet, consectetur adipisicingelit. Nobis necessitatibus aspernatur accusamus, sit exercitationem nostrumitaque sed consequatur perferendis iusto maiores possimus saepe numquampariatur? Labore excepturi totam id ipsum.
</div>
</div>
</body>
Please, run this snippet to better understand my issue
body{
background-color: #E13241;
font-family: sans-serif;
font-weight: 300;
}
#wrapper{
width: 1130px;
margin: 100px auto;
}
.box1, .box2, .box3, .box4{
width: 230px;
height: 200px;
overflow: hidden;
float: left;
word-break: break-all;
word-spacing: -1px;
margin-left: 15px; /* or 0px */
background-color: rgba(25, 25, 25, 0.2);
padding: 15px;
transition: all 0.5s ease-in;
}
h3{
text-align: center;
}
.box1:hover, .box2:hover, .box3:hover, .box4:hover{
width: 230px;
height: 300px;
margin-top: -50px;
overflow-y: scroll;
}
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-track {background-color: rgba(25, 25, 25, 0.2);}
::-webkit-scrollbar-thumb {background-color: rgba(25, 25, 25, 0.2);}
<div id="wrapper">
<div class="box1">
<h3>
Title Box 1
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, beatae! Sed assumenda cupiditate quasi officiis laborum, minima at error tempore. Voluptatibus facere iste qui? Fugit non perferendis, accusamus nostrum deleniti?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus consequuntur laborum porro nemo, quisquam minus minima eius, deserunt similique, laboriosam dolorum tenetur et repudiandae rem fugit illum perspiciatis nam totam.
</p>
</div>
<div class="box2">
<h3>
Title Box 2
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, beatae! Sed assumenda cupiditate quasi officiis laborum, minima at error tempore. Voluptatibus facere iste qui? Fugit non perferendis, accusamus nostrum deleniti?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus consequuntur laborum porro nemo, quisquam minus minima eius, deserunt similique, laboriosam dolorum tenetur et repudiandae rem fugit illum perspiciatis nam totam.
</p>
</div>
<div class="box3">
<h3>
Title Box 3
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, beatae! Sed assumenda cupiditate quasi officiis laborum, minima at error tempore. Voluptatibus facere iste qui? Fugit non perferendis, accusamus nostrum deleniti?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus consequuntur laborum porro nemo, quisquam minus minima eius, deserunt similique, laboriosam dolorum tenetur et repudiandae rem fugit illum perspiciatis nam totam.
</p>
</div>
<div class="box4">
<h3>
Title Box 4
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, beatae! Sed assumenda cupiditate quasi officiis laborum, minima at error tempore. Voluptatibus facere iste qui? Fugit non perferendis, accusamus nostrum deleniti?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus consequuntur laborum porro nemo, quisquam minus minima eius, deserunt similique, laboriosam dolorum tenetur et repudiandae rem fugit illum perspiciatis nam totam.
</p>
</div>
</div>
So, I have a box within a div. When I hover it, the box gets higher and it is possible to scroll inside the box. But I can't figure a way to automatically scroll back to the top of the box when I do not hover the box anymore.
I've tried multiple things, including this js code I found in another answer :
$('#box').show();
$('#box').scrollTop(0);
$('html,body, #box').animate({scrollTop: 0}, 100);
But it's just cancelling all my css and do not work in this specific scenario.
Any idea or direction to follow ?
I have block with width in % and height in rem and I need to fill it with random-length text. I need the number of visible lines (block has overflow:hidden) to be integer and the last line to end with "...read full text" link. Of course, this must work for every font/line size and any page scale.
How to realize this?
https://jsfiddle.net/2go48yum/
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur distinctio tempore porro voluptatum iste, pariatur. Nam ea alias aliquam nesciunt, tenetur autem nisi laborum officiis voluptatibus laudantium esse, ut reiciendis? ipsum dolor sit amet,
consectetur adipisicing elit. Illum quisquam, natus in similique consequatur officia aperiam vel voluptatibus, beatae possimus. Vero ab rerum ratione doloremque veritatis totam quas facere porro. ipsum dolor sit amet, consectetur adipisicing elit. Delectus
est dolorem laborum eius quia architecto, adipisci tempora blanditiis, nisi aliquid expedita numquam debitis. Commodi perspiciatis, inventore accusantium animi quas</div>
.content {
width: 50%;
height: 15rem;
overflow: hidden;
}
p { margin: 0; padding: 0; font-family: sans-serif;}
.ellipsis {
overflow: hidden;
height: 200px;
line-height: 25px;
margin: 20px;
border: 1px solid #AAA;
}
.ellipsis:before {
content:"";
float: left;
width: 5px; height: 200px; }
.ellipsis > *:first-child {
float: right;
width: 100%;
margin-left: -5px; }
.ellipsis:after {
content: "\02026";
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
float: right; position: relative;
top: -25px; left: 100%;
width: 3em; margin-left: -3em;
padding-right: 5px;
text-align: right;
background-size: 100% 100%;
}
<div class="ellipsis"><div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur distinctio tempore porro voluptatum iste, pariatur. Nam ea alias aliquam nesciunt, tenetur autem nisi laborum officiis voluptatibus laudantium esse, ut reiciendis? ipsum dolor sit amet,
consectetur adipisicing elit. Illum quisquam, natus in similique consequatur officia aperiam vel voluptatibus, beatae possimus. Vero ab rerum ratione doloremque veritatis totam quas facere porro. ipsum dolor sit amet, consectetur adipisicing elit. Delectus
est dolorem laborum eius quia architecto, adipisci tempora blanditiis, nisi aliquid expedita numquam debitis. Commodi perspiciatis, inventore accusantium animi quas</p>
</div></div>
For infos and not reliable.
With CSS you could try using mix-blend-mode and position:sticky. But most of the browser will not play it (At this time, FF&Chrome understand both mix-blend-mode and sticky ).
.content {
float: left;
border: solid;
margin: 1%;
width: 45%;
height: 11rem;
overflow: hidden;
background: yellow;
text-align: justify;
/*text-align-last:justify;for test purpose only */
}
.content:after {
position: sticky;
bottom: 0;
float: right;
margin-left: -1em;
width: 1em;
content: '...';
display: inline-block;
background: inherit;
mix-blend-mode: screen;
z-index: 1;
}
.disclaimer {
mix-blend-mode: difference;
}
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur distinctio tempore porro voluptatum iste, pariatur. Nam ea alias aliquam nesciunt, tenetur autem nisi laborum officiis voluptatibus laudantium esse, ut reiciendis? ipsum dolor sit amet,
consectetur adipisicing elit. Illum quisquam, natus in similique consequatur officia aperiam vel voluptatibus, beatae possimus. Vero ab rerum ratione doloremque veritatis totam quas facere porro. ipsum dolor sit amet, consectetur adipisicing elit. Delectus
est dolorem laborum eius quia architecto, adipisci tempora blanditiis, nisi aliquid expedita numquam debitis. Commodi perspiciatis, inventore accusantium animi quas</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur distinctio tempore porro voluptatum iste, pariatur. Nam ea alias aliquam nesciunt, tenetur autem nisi laborum officiis voluptatibus laudantium esse, ut reiciendis? <br/>
<b class="disclaimer">If you see this text, mix-blend-mode is not supported</b></div>
I have a graphic element positioned at the bottom center of my page that is supposed to fade-in when you start scrolling down.
I am using ScrollMagic JS
The problem is that element is being displayed automatically whenever I reload the page and then fades out. And after I start scrolling down, it fades back in again and starts working normally.
I need to hide on initial page load.
How may I achieve that? Because adding display: none to the element simply hides it all together.
I would also like to use a different kind of animation, instead of ease-out in CSS, I would like to use something that makes the graphic element to look like as it is rising up and rising down.
Similar to this site here: http://lempens-design.com/
DEMO https://jsfiddle.net/jtLo27op/3/
HTML
<div class="intro">
<div class="background_image"></div>
<div class="container-fluid height100">
<div class="row height100">
<div class="col-md-12 text-center height100">
<img src="assets/img/logo.png" alt="Logo" class="logo">
<div id="animate" class="city-vector">
<img src="assets/img/skyline.png" alt="Skyline" class="skyline">
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut!</h1>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut!</h1>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut!</h1>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut!</h1>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut!</h1>
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur distinctio facilis fugit quasi quisquam quos recusandae rerum sunt temporibus voluptates? A, ipsa labore laudantium non recusandae suscipit vel voluptas. Aut!</h1>
</div>
</div>
CSS
html, body {
width: 100%;
height: 100%;
}
body {
background-color: #191617;
}
.height100 {
height: 100%;
}
.logo {
width: 220px;
margin-top: 10em;
}
.skyline {
display: block;
max-width: 100%;
position: absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
}
.city-vector {
opacity: 1;
transition: all 3s ease-out;
}
.city-vector.fade-in {
opacity: 0;
}
.intro {
height: 100%;
position: relative;
overflow: hidden;
}
.intro::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url('../img/bg/bg5.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
transform: scale(1.01);
}
Javascript
$(document).ready(function() {
var controller = new ScrollMagic.Controller();
var ourScene = new ScrollMagic.Scene({
triggerElement: '#animate',
duration: 361
})
.setClassToggle('#animate', 'fade-in')
.addTo(controller);
});
You have to change your CSS code:
.city-vector {
opacity: 0;
transition: all 3s ease-out;
}
.city-vector.fade-in {
opacity: 1;
}
Updated JSfiddle
UPDATE: Okay, for the function you want, you don't need any external libraries. I don't have any experience with ScrollMagic, so I just didn't use it. I've also added the animation that makes it "rise out of the page" through CSS.
JSfiddle
jQuery
$(document).ready(function() {
$(window).scroll(function() { //run function every time window is scrolled
var scroll = $(window).scrollTop(); //find how much is scrolled from top
if (scroll > 0) { // if the scroll from top is greater than zero...
$("#animate").addClass("fade-in"); //then add class
} else { // if the scroll from top is not greater than zero...
$("#animate").removeClass("fade-in"); //then remove class
}
});
});
CSS animation:
.skyline {
display: block;
max-width: 100%;
position: absolute;
bottom: 0;
opacity: 0; /* I removed this in update */
transition: all 3s ease-out; /* Changed animation duration to 0.5s */
left: 50%;
transform: translate(-50%, 100%);
}
.city-vector.fade-in .skyline {
transform: translate(-50%);
opacity: 1; /* and this */
}
UPDATE: New JSfiddle with "snappish" effect.