I have a very simple parallax example set up but am noticing that changes to window.scrollY are not occurring (it's always 0) when scrolling through my elements. It's as if because we're just moving through a perspective, javascript doesn't detect any scrolling.
How can I detect scroll changes when scrolling through css viewport perspective?
I have my css setup as follows:
* {
margin:0;
padding:0;
}
body {
}
.parallax {
overflow-x:hidden;
overflow-y:auto;
perspective:1px;
height:200vh;
}
.back {
background-color:#fff;
height:100vh;
transform:translateZ(-1px) scale(2);
}
.base {
transform:translateZ(0);
background-color:#fff;
}
.parallax__layer {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
display:block;
}
.title {
text-align:center;
position:absolute;
left:50%;
top:50%;
color:blue;
transform:translate(-50%, -50%);
display:block;
}
And my dom content is:
<div class="parallax">
<div class="parallax__layer back">
<div class="title">test</div>
</div>
<div class="parallax__layer">
<div class="title">image</div>
<div class="frame">
test frame
</div>
</div>
</div>
Since the overflow property is set on .parallax you would check for scrolling on that instead of the window:
$('.parallax').on("scroll", function(){
var scrollPosition = $(this).scrollTop();
});
The key here is to detect scroll within the parallax element -- within a single frame div.
So you might do something like:
const handleScrolling () => if (window.scrollY || window.pageYOffset < totalheight) requestAnimate()
$('.parallax').on('scroll', handleScrolling);
Related
The main idea is to obtain the UI design of the Canva website homepage. Here's the link: https://www.canva.com/en_in/
Steps that I followed:
I found no way to blur a background image, so I inserted an image within a <div> with an id="background".
And then modified the CSS of it as:
#background{
position:absolute;
top:0;
left:0;
z-index:-1;
}
Now I'll blur the image so that, when I hover my mouse over it, that particular part gets clear.
Obviously, when I hover over it, the entire image gets clear.
But the goal is to clear the area where the mouse pointer overs at.
I guess, we should make use of the Mouse event ClientX property to get the position of the mouse pointer and clear that particular co- ordinate.
But I'm clueless on how to code it.
https://github.com/thdoan/magnify
A simple way would to use magnify to zoom over the already blurred image.
$(document).ready(function() {
$('.zoom').magnify();
});
img {
-webkit-filter: blur(10px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.0/js/jquery.magnify.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.0/css/magnify.css" rel="stylesheet"/>
<img src="http://via.placeholder.com/350x150" class="zoom" data-magnify-src="http://via.placeholder.com/350x150">
Here is a pure JS solution that rely on clip-path and CSS variables, the idea is to duplicate the images to have one blurred and one not. Then we reveal the non-blurred one on the top:
var image =document.querySelector('.blur');
var p= image.getBoundingClientRect();
document.body.onmousemove = function(e) {
/*Adjust the clip-path*/
image.style.setProperty('--x',(e.clientX-p.top)+'px');
image.style.setProperty('--y',(e.clientY-p.left)+'px');
}
.blur {
display:inline-block;
width:400px;
height:200px;
position:relative;
}
.blur:before,
.blur:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:var(--i);
}
.blur:before {
filter:blur(5px) grayscale(60%);
}
.blur:after {
clip-path: circle(60px at var(--x,-40px) var(--y,-40px));
}
<div class="blur" style="--i:url(https://picsum.photos/400/200?image=1069)">
</div>
With this solution you can easily do the oppsite if you want to blur a part of the image on hover:
var image =document.querySelector('.blur');
var p= image.getBoundingClientRect();
document.body.onmousemove = function(e) {
/*Adjust the clip-path*/
image.style.setProperty('--x',(e.clientX-p.top)+'px');
image.style.setProperty('--y',(e.clientY-p.left)+'px');
}
.blur {
display:inline-block;
margin:50px;
width:200px;
height:200px;
position:relative;
}
.blur:before,
.blur:after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:var(--i);
}
.blur:after {
filter:blur(5px);
}
.blur:after {
clip-path: circle(60px at var(--x,-40px) var(--y,-40px));
}
<div class="blur" style="--i:url(https://picsum.photos/200/200?image=1069)">
</div>
Well I am very new with javascript, have always loved to work on my own codes as it is easier to edit.
I am working on making a website which animates on scroll.
By seeing many tutorials I am able to make the div animation on a particular scroll from top
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("animate").className = "boxl1";
} else {
document.getElementById("animate").className = "";
}
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("animate1").className = "boxl2";
} else {
document.getElementById("animate1").className = "";
}
}
#main{
width:1000px; height:2000px; float:left; background-color:#000;
}
#left{
width:500px;
height:500px;
float:left;
background-color:#F00;
}
.boxl1{
width:100px;
height:100px;
float:left;
background-color:#FFF;
background-image:url(gif/1.png);
transform:scaleX(-1);
animation-name:lefty;
animation-duration:5s;
}
#keyframes lefty{
0%{
margin:0px;
transform:rotate(0deg);
}
100%{
margin:400px;
transform:rotate(270deg);
}
}
#right{
width:500px;
height:500px;
float:left;
background-color:#0F0;
}
.boxl2{
width:100px;
height:100px;
background-color:#FFF;
background-image:url(gif/1.png);
float:right;
animation-name:travel;
animation-duration:5s;
}
#keyframes travel{
0%{
margin:0px;
transform:rotate(0deg);
}
100%{
margin:400px;
transform:rotate(360deg);
}
}
#leftd{
width:500px;
height:500px;
float:left;
background-color:#0F0;
}
#rightd{
width:500px;
height:500px;
float:left;
background-color:#F00;
}
<div id="main">
<div style="margin-top:400px;">
<div id="left">
<div id="animate"></div>
</div>
<div id="right">
<div id="animate1"></div>
</div>
<div id="leftd">
</div>
<div id="rightd">
</div>
</div>
</div>
Now all i want into this is that it should not complete the animation until i scroll down and reverse it when i scroll up.
the method i think is, i can create many boxes in css (like boxl1, boxl2,boxl3,...n) with different margins, and make a switch statement, but as i am too new to this, can you help me how does it works? I saw many tutorials they all show day and date, or names nothing for class and divs
Many answers here ask to get a js library and stuff, but i want to write it myself, if you can help, it would be great, thanks in advance!
I tried to do an overlay for images, but I have 2 problems:
$(document).ready(function () {
$('#boximmagini img').click(function(){
$("#immagine img:last-child").remove()
var source= $(this).attr('src');
$('#immagine').append("<img src="+source+"/>")
$('#overlay').fadeIn('fast');
$('#box').fadeIn('slow');
});
$(".chiudi").click(function(){
$('#overlay').fadeOut('fast');
$('#box').hide();
});
$("#overlay").click(function(){
$(this).fadeOut('fast');
$('#box').hide();
});
});
.chiudi{
cursor:pointer;
}
.overlay{
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:100;
cursor:pointer;
}
#box{
width:600px;
height:400px;
display:none;
z-index:+300;
position:absolute;
left:30%;
top:20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="overlay" id="overlay" style="display:none"></div>
<div id="box">
<div class="chiudi">CHIUDI</div><br>
<div id="immagine"></div>
</div>
<div id="boximmagini">
<div><b>Clicca</b></div>
<img src="http://i62.tinypic.com/icpph2.jpg" class="imgoverlay" style="width: 31%" />
</div>
PROBLEMS:
I don't know how position #box in middle of screen. With left: 30% it isn't in the middle of screen. I have read other question where a lot of user suggest to use a div with position relative and inside it a div with position absolute. But in my case i think that is not possible.
when the box fadein, and i resize the window, the box is "out" window (the cause is left property)
I hope that you can help me!
Sorry for my english
Thanks!
I this fiddle I set both your changing color and making sure it is always in the middle, setting left:50% and translate3d -50% will always set it to the center because of the position absolute, if you want also vertical positioning do the same for top and -50% to the y (2nd parameter): http://jsfiddle.net/whb3mpg4/7/
#box{
width:600px;
height:400px;
display:none;
z-index: 300;
position:absolute;
top:20%;
left:50%;
transform: translate3d(-50%,0,0);
}
#box img{
position:absolute;
left:50%;
transform: translate3d(-50%,0,0);
}
I know I could use same CSS class for both but I wanted to keep it clear and not changing the JS or the CSS defenitions
Hope this helped you.
I have a website menu bar that has two separate divs that a site visitor can toggle between just by tapping. Here's the fiddle and the actual code:
HTML:
<div id="container">
<div id="div">
<div id="next1">MENU 1</div>
<div id="next2">MENU 2</div>
</div>
</div>
CSS
#container{
height:100px;
width:50%;
position:relative;
overflow:hidden;
}
#div{
height:100px;
width:100%;
position:relative;
}
#next1{
height:100px;
width:100%;
top:0;
left:0;
background:green;
position:absolute;
}
#next2{
height:100px;
width:100%;
top:0;
left:100%;
background:orange;
position:absolute;
}
JavaScript
$("#next1").click(function () {
targetLeft = "-100%";
$("#div").animate({left: targetLeft},400);
});
$("#next2").click(function () {
targetLeft = "0";
$("#div").animate({left: targetLeft},400);
});
The code works well, but I'd like to do this without JQuery, and am wondering if anyone knows how this could be done? (If it can be done without JavaScript as well, that would be ideal but I'm not sure that's possible.)
Thanks for reading!
You could use CSS3 transitions instead:
Example Here
document.getElementById('next1').addEventListener('click', function () {
document.getElementById('div').style.left = '-100%';
});
document.getElementById('next2').addEventListener('click', function () {
document.getElementById('div').style.left = '0%';
});
#div {
height:100px;
width:100%;
position:relative;
left: 0;
transition: left 400ms ease-in-out;
}
I currently have a mobile website project in which I'm creating panels such that one panel can be viewed at a time, where when a user swipes left or right, the panel slides offscreen and a new panel slides in. Everything works fine on Android, and even behavior is acceptable on iPhone.
However, scrolling on iPhone seems to lack momentum. In other words, when "flicking" the panel up / down, it scrolls on Android natively, but on iPhone it seems to lose momentum very quickly. I'd like to find a simple CSS or combo CSS / JS solution that works, without including additional libraries if possible.
Here's the basic structure of the site:
<html>
<head>Head stuff here</head>
<body>
<div class="container">
<div class="headbox">Fixed position menu here</div>
<div id="pages">
<div class="page">Page panel here</div>
<div class="page">Page panel here</div>
<div class="page">Page panel here</div>
</div>
<div class="bottommenu">Fixed position bottom menu here</div>
</div>
</body>
</html>
Here is the basic CSS:
body {
width:100%;
overflow-x:hidden;
font-size:17px;
border-collapse:collapse;
}
.container {
width:100%;
height:100%;
overflow-x:hidden;
overflow-y:scroll;
position:relative;
/*-webkit-perspective:1000;
-webkit-backface-visibility:hidden;*/
}
.headbox {
font-size:17px;
height:2.3529em;
width:100%;
top:0;
position:fixed;
text-align:center;
color:#fff;
z-index:1;
}
#pages {
width:100%;
height:100%;
white-space:nowrap;
font-size:0;
-webkit-backface-visibility:hidden;
-webkit-transform-style:preserve-3d;
position:relative;
-webkit-transform:translate3d(-100%,0,0);
-moz-transform:translate3d(-100%,0,0);
-ms-transform:translate3d(-100%,0,0);
-o-transform:translate3d(-100%,0,0);
transform:translate3d(-100%,0,0);
}
.page {
width:100%;
height:100%;
display:inline-block;
vertical-align:top;
position:relative;
white-space:normal;
background:#fff;
font-size:17px;
}
.bottommenu {
position:fixed;
bottom:0;
left:0;
width:100%;
height:.2em;
transition:height 400ms;
-webkit-transition:height 400ms;
-moz-transition:height 400ms;
-ms-transition:height 400ms;
-o-transition:height 400ms;
z-index:1;
}
And finally, the listener for scrolling, which shouldn't interfere with CSS or the ability to repaint, but maybe I am missing something:
var that = this;
$(document).scroll(function(){
if (!that.direction && !that.loading) {
that.direction = 'vertical';
that.moving = true;
if (that.scrolling) { clearTimeout(that.scrolling); }
that.scrolling = setTimeout(function() {
that.direction = false;
that.sliding = 0;
that._getMore();
that.moving = false;
},500);
}
});
Any ideas? I've tried numerous variations of -webkit-overflow-scrolling:touch;, overflow-y:scroll;, and other possible hacks / fixes / supported syntax, but nothing seems to help. I need the content to scroll within the body tag so that on iPhone the screen resizes itself on scroll, otherwise I'd use a scrollable div. This is not an option.
I guess problem with loss of native elastic scrolling within container with position: relative; overflow: hidden.
Try -webkit-overflow-scrolling: touch; for .container.