window.addEventListener('scroll',function(){
if(window.pageYOffset > 100)
{
document.getElementById('fade').style.opacity=1;
}
else
{
document.getElementById('fade').style.opacity=0;
}
});
JavaScript fad-in fade-out animation with scrolling event or without using libraries API, only with logics
To achieve this you can use the CSS transition and opacity properties with a class that you toggle via JS to fade in/out an element:
window.addEventListener('scroll', function() {
document.querySelector('#fade').classList.toggle('visible', window.pageYOffset > 100);
});
#fade {
transition: opacity 0.5s;
opacity: 0;
/* only for this demo... */
position: fixed;
top: 50px;
}
#fade.visible {
opacity: 1;
}
div {
/* only for this demo... */
height: 1000px;
}
<div>Scroll down</div>
<div id="fade">Lorem ipsum dolor sit</div>
A basic example..
HTML:
<!DOCTYPE html>
<html lang="en">
<body>
<section>
<div class="tile bottom-right"></div>
<div class="tile bottom-right"></div>
<div class="tile bottom-right"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</section>
</body>
</html>
CSS
body {
max-width:900px;
margin:0 auto;
}
.tile {
height:400px;
margin-top:40px;
background:grey;
-webkit-transform: translateY(50px) rotate(-5deg) translateZ(0);
transform: translateY(50px) rotate(-5deg) translateZ(0);
-webkit-transition-delay: .3s;
-o-transition-delay: .3s;
transition-delay: .3s;
-webkit-transition: .4s;
-o-transition: .4s;
transition: .4s;
opacity: 0;
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
.bottom-right.inView {
opacity: 1;
-webkit-transform: translateY(0px) rotate(0deg) translateZ(0);
transform: translateY(0px) rotate(0deg) translateZ(0);
}
.inView {
opacity: 1;
-webkit-transform: translateY(0px) rotate(0deg) translateZ(0);
transform: translateY(0px) rotate(0deg) translateZ(0);
}
section {
padding:20px;
}
JS
let elementsArray = document.querySelectorAll(".tile");
console.log(elementsArray);
window.addEventListener('scroll', fadeIn );
function fadeIn() {
for (var i = 0; i < elementsArray.length; i++) {
var elem = elementsArray[i]
var distInView = elem.getBoundingClientRect().top - window.innerHeight + 20;
if (distInView < 0) {
elem.classList.add("inView");
} else {
elem.classList.remove("inView");
}
}
}
fadeIn();
The animation is not made in JS. The animation is made in css. In the JS we remove or add the class. But we need the height of the screen the user is using with using the var distInView = elem.getBoundingClientRect().top - window.innerHeight + 20;. Please before copying the code read the code and try to understand what is happening..
Related
I have a balloon that when hovered, will expand n disappear (a popping-like animation). I made this in CSS but when the cursor moves, the balloon returned. I want the balloon to disappear forever until I refresh the page, so I guess it needs to be onclick, but that selector is not available in CSS.
Here's what I have in CSS
#keyframes pop
{
from{
opacity:1;
transform: translateZ(0) scale(1,1);
}
to{
opacity:0;
transform: translateZ(0) scale(1.5,1.5);
}
}
.balloon:hover
{
animation: pop 0.5s cubic-bezier(0.16, 0.87, 0.48, 0.99) forwards;
}
I saw another question that said the closest thing is :active but it requires the mouse to be held down. If I want it to be onclick, I need to use Javascript. But I don't know what I need to write to trigger the animation.
And is it also possible to make it so that when I pop 1 balloon, all the others will pop too automatically with a 1s delay inbetween? (There are 5 balloons).
You can add and remove the class of the animation with JS using classList.
Add:
object.classList.add('balloon');
Remove:
object.classList.remove('balloon');
Working example:
const add = () => {
document.getElementById('balloon').classList.add('animation')
}
const remove = () => {
document.getElementById('balloon').classList.remove('animation')
}
#keyframes pop {
from {
opacity: 1;
transform: translateZ(0) scale(1, 1);
}
to {
opacity: 0;
transform: translateZ(0) scale(1.5, 1.5);
}
}
.animation {
animation: pop 0.5s cubic-bezier(0.16, 0.87, 0.48, 0.99) forwards;
}
.balloon {
height: 125px;
width: 110px;
background-color: #FF6B6B;
border-radius: 50%;
}
.controls{
position: absolute;
bottom: 10px;
right: 10px;
}
<div id="balloon" class="balloon" onmouseover="add()"></div>
<div class="controls">
<button onClick="add()">Hide</button>
<button onClick="remove()">Show</button>
</div>
Here is a solution which makes balloons hiding one by one with interval .5s between them
var balloons = document.getElementsByClassName('balloon');
[...balloons].forEach( (e, i)=>{
e.onmouseover = function() {
this.classList.add('hidden');
setTimeout(hideAll, 500, balloons);
}
});
function hideAll(arg){
[...arg].forEach( (e, i)=>{
if ( ! e.classList.contains('hidden') ) {
e.style.animationDelay = i+'s';
e.classList.add('hidden');
}
});
}
#keyframes pop
{
from{
opacity:1;
transform: translateZ(0) scale(1,1);
}
to{
opacity:0;
transform: translateZ(0) scale(1.5,1.5);
}
}
.balloon.hidden
{
animation: pop .5s cubic-bezier(0.16, 0.87, 0.48, 0.99) forwards;
}
<div class="balloon">Balloon</div>
<div class="balloon">Balloon</div>
<div class="balloon">Balloon</div>
<div class="balloon">Balloon</div>
<div class="balloon">Balloon</div>
I need to add page preloader when the user clicks on the login button in my project.so I create a sample page by including a submit button. and created a spinner as a preloader by using CSS as well as a javascript function to execute the spinner & fade it out and load another page call welcome.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="overlay"> <div class="spinner"></div>
</div>
<input type="submit" name="click me" id="submit">
**here is the javascript function**
<script>
(function(){
var spinner =document.getElementById("spinner");
var loading = 0;
var id = setInterval(frame,20);
function frame(){
if(loading==100){
clearInterval(id);
window.open("welcome.html","_self");
} else {
loading = loading + 1;
if(loading==90){
spinner.style.animation ="fadeout 1s ease";
}
}
}
})();
</script>
</body>
</html>
**here is the style sheet for preloader**
.overlay{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ff6347;
z-index: -999;
}
.spinner {
position: fixed;
top: 33%;
left: 48%;
width: 60px;
height: 60px;
background-color: black;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
}
**here is the keyframe code for fadeout**
#keyframes fadeout {
from {opacity: 1;}
to{opacity: 0;}
}
}
#-webkit-keyframes sk-rotateplane {
0% { -webkit-transform: perspective(120px) }
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}
#keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
what I needed was, the user clicks on the button and then shows the preloader. But the thing is when I run the page button appears at the same time spinner preloader is running without clicking on the button and after the loading welcome.html page opens.
You should hide the spinner initially and only show it when the loading starts. So you could change the frame function to something like this:
function loading(){
if(loading==0) {
spinner.classList.add('active');
} else if(loading==100){
clearInterval(id);
window.open("welcome.html","_self");
spinner.classList.remove('active');
} else {
loading = loading + 1;
if(loading==90){
spinner.style.animation ="fadeout 1s ease";
}
}
}
Also you could add some sort of click listener to the submit button rather than setting an interval to check every 20 milliseconds on page load already, that seems unnecessary.
And then change this in your css:
.spinner {
display: none;
position: fixed;
top: 33%;
left: 48%;
width: 60px;
height: 60px;
background-color: black;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
}
.spinner.active {
display: block
}
First add
.overlay{
display:none;
}
in css and then on click function of submit button add
document.getElementById("overlayId").style.display = "block";
If you are using javascript
and
$(".overlay").css("display", "block");
if you are using jquery
N.B.: overlayId is the Id of overlay DIV
I want that whenever I click on the div, it first translate, then rotate and, finally scale. Further, I want to reverse it back in the same way when I click again
I have the following code:
$(() => {
$('div').on('click', () => {
$('div').toggleClass('clicked');
});
});
div.normal {
height: 20px;
width: 100px;
background: black;
transition: 2s all;
}
div.clicked {
transform: translate(100px, 100px) rotate(45deg) scale(2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='normal'></div>
As you can see, all the transformations are occurring at the same time. But, I want them to occur separately. How do I achieve this?
Thanks in advance!
Decompose your animation using keyframes. Here is a minimally edited version of your code:
var $el = $('#to-animate')
var firstClick = true
$el.click(() => {
$el.toggleClass('clicked')
if (!firstClick) {
$el.toggleClass('unclicked')
}
firstClick = false
})
div.normal {
height: 20px;
width: 100px;
background: black;
}
div.clicked {
animation: transforms 2s forwards;
}
div.unclicked {
animation: transforms-2 2s reverse;
}
#keyframes transforms {
33% {
transform: translate(100px, 100px);
}
66% {
transform: translate(100px, 100px) rotate(45deg);
}
100% {
transform: translate(100px, 100px) rotate(45deg) scale(2);
}
}
#keyframes transforms-2 {
33% {
transform: translate(100px, 100px);
}
66% {
transform: translate(100px, 100px) rotate(45deg);
}
100% {
transform: translate(100px, 100px) rotate(45deg) scale(2);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="to-animate" class='normal'></div>
Edit updated to include ability to reverse the animation (making the code edit less minimal)
An idea is to rely on other properties to achieve the same effect and be able to apply different transition
$(() => {
$('div').on('click', () => {
$('div').toggleClass('clicked');
});
});
div.normal {
height: calc(20px * var(--s,1));
width: calc(100px * var(--s,1));
background: black;
position:relative;
top:0;
left:0;
transition: 2s top 4s,2s left 4s,2s width 2s,2s height 2s,2s transform;
}
div.clicked {
top:100px;
left:100px;
--s:2;
transform:rotate(45deg);
transition: 2s top,2s left,2s width 2s,2s height 2s,2s transform 4s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='normal'></div>
I'm trying to get content to move across the screen but I was having trouble moving text with Bootstrap's carousel.
I have an animation working, but the divs sit on top of each other so they animate in and out of their own positions, not in and out of the same position.
Here's the CSS
/* Home and about pages */
#about-page {
transform: translateX(200%);
}
.slideOutLeft {
animation: slideOutLeft 1s forwards;
}
.slideInLeft {
transform: translateX(-200%);
animation: slideInLeft 1s forwards;
}
.slideOutRight{
transform: translateX(200%);
animation: slideOutRight 1s forwards;
}
.slideInRight {
animation: slideInRight 1s forwards;
}
/* Slide in from the left */
#keyframes slideOutLeft {
0% { transform: translateX(0%); }
100% { transform: translateX(-200%); }
}
#keyframes slideInLeft {
0% { transform: translateX(-200%); }
100% { transform: translateX(0%); }
}
#keyframes slideOutRight {
0% { transform: translateX(0%); }
100% { transform: translateX(200%); }
}
#keyframes slideInRight {
0% { transform: translateX(200%); }
100% { transform: translateX(0%); }
}
which is triggered by the following JavaScript
$(function() {
// Go to home
$("#home-link").click(function(){
// Link appearance
$(this).addClass('active');
$('#about-link').removeClass('active');
// Slide in homepage
$('#home-page').removeClass('slideOutLeft');
$('#home-page').addClass('slideInLeft');
// Slide out about page
$('#about-page').removeClass('slideInRight');
$('#about-page').addClass('slideOutRight');
$('#about-page').addClass('hidden');
});
// Go to about slide
$("#about-link").click(function(){
// Link appearance
$(this).addClass('active');
$('#home-link').removeClass('active');
// Slide out homepage
$('#home-page').removeClass('slideInLeft');
$('#home-page').addClass('slideOutLeft');
$('#home-page').addClass('hidden');
// Slide in about page
$('#about-page').removeClass('slideOutRight');
$('#about-page').addClass('slideInRight');
});
});
You can see the problem at testing version of the site here.
Thanks for all of your help and advice.
First add a class item in your page containers
<div class="inner cover">
<div id="home-page" class="item">
<!-- content -->
</div>
<div id="about-page" class="item">
<!-- content -->
</div>
</div>
Add this block in your css
.inner.cover {
position: relative;
overflow: hidden;
height: 200px;
}
.item {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
I'm trying to create an animation for text on a page that, every few seconds, changes one word out with another word from a list. Example: I have a header that says, "This is cool," but I want "cool" to be replaced every few seconds by "neat/awesome/groovy/etc".
I'm honestly not sure the best way to go about this (in terms of what technology to use) and I can't find a blurb of code that works with modern browsers. Help is greatly appreciated!
in Pure JS
http://jsfiddle.net/M5gxH/3/
<script>
var words = ["neat", "great", "best", "groovy"];
var i = 0;
var text = "This is cool";
function _getChangedText() {
i = (i + 1) % words.length;
console.log(words[i]);
return text.replace(/cool/, words[i]);
}
function _changeText() {
var txt = _getChangedText();
console.log(txt);
$("#changer").text(txt);
}
setInterval("_changeText()", 1000);
</script>
<span id="changer">This is cool</span>
In jQuery, I'd do something like this:
http://jsfiddle.net/6SRaB/1/
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() { // on document load
changer();
});
function changer() {
var words = ["nifty","groovy","far out"]; // add as many as you like
var idx = Math.floor(words.length * Math.random()); // randomizer
$('#change').text(words[idx]); // replaces the contents of "change"
var time = Math.floor(5000 * Math.random() + 3000); // in milliseconds
setTimeout(changer,time); // lather, rinse, repeat
}
</script>
...
<h2>This is <span id="change">cool</span></h2>
The key is to use a SPAN tag with an ID that you can pick out quickly.
This question is quite old but it showed up in a google search for me. In 2018 you can easily implement this behavior with CSS Animations without the need for any additional JavaScript code.
The following should give you what you need:
<!DOCTYPE html>
<html>
<head>
<style>
.animated{
display: inline;
text-indent: 8px;
}
.animated span{
animation: topToBottom 12.5s linear infinite 0s;
-ms-animation: topToBottom 12.5s linear infinite 0s;
-webkit-animation: topToBottom 12.5s linear infinite 0s;
color: red;
opacity: 0;
overflow: hidden;
position: absolute;
}
.animated span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.animated span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.animated span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.animated span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
#-moz-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: translateY(-50px); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-webkit-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: translateY(-50px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-ms-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: translateY(-50px); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
</style>
</head>
<body>
<h2>CSS Animations are
<div class="animated">
<span>cool.</span>
<span>neat.</span>
<span>awesome.</span>
<span>groovy.</span>
<span>magic.</span>
</div>
</h2>
</body>
</html>
Note that this is just an example with vertical sliding. There are basically endless possibilities with CSS in terms of animations/transitions.