Heyy guys,
At first I want to apologize for my bad english.
I am making an site wich you can find here for the moment: http://rekenopjetoekomst.nl/test/test.html
When you scroll down the height of the foto under the menu will decrease. But the arrows that you need to navigate trough the slideshow have to disappear also. I am doing that by changing the opacity to 0 with a transition.
But my problem is that when you scroll down and then scroll fast up (a second or something) you will still see the arrows (with an opacity of 0.6 or something). Soo.. What I want is: When the arrows are out of the screen the opacity must be 0 without an transition. And if you scroll back to the foto the arrows have to appear with an transition.
Thnx for all your help!
Javascript (with only the arrows 1 and 2):
function yScroll(){
pijl1 = document.getElementById('pijl1');
pijl2 = document.getElementById('pijl2');
yPos = window.pageYOffset;
if(yPos > 100 && yPos < 370){
pijl1.style.opacity = "0.8";
pijl2.style.opacity = "0.8";
} else if(yPos > 370){
pijl1.style.opacity = "0.0";
pijl2.style.opacity = "0.0";
}
}
var animateInterval = setInterval(yScroll,10);
CSS:
#mainbox #foto #pijl1 {
transition: opacity 1s ease-in 1.3s;
}
#mainbox #foto #pijl2 {
transition: opacity 1s ease-in 1.3s;
}
I would use a tri-state setup.
the first state is the visible (normal) one. The second is the fading state, the opacity is set to 0, and there is a transition on it. The third one is the out state. in this one, we set the opacity to 0, but without delay.
To manage this, we create 3 classes, and asign each one according to the scroll level
demo with extended timings so it is easier to see
function yScroll(){
ele = document.getElementById('test');
yPos = window.pageYOffset;
if(yPos > 200){
ele.className = "out";
} else if(yPos > 100){
ele.className = "fading";
} else {
ele.className = "normal";
}
}
var animateInterval = setInterval(yScroll,10);
#test {
height: 50px;
width: 100px;
margin-top: 300px;
background-color: green;
}
.pusher {
margin: 3000px;
}
.out {
opacity: 0.1;
transition: opacity 0.1s;
}
.fading {
opacity: 0.2;
transition: opacity 20s;
}
.normal {
opacity: 1;
transition: opacity 20s;
}
<div id="test"></div>
<div class="pusher"></div>
Related
I want to display the word 'Hello' on the home page of a website. I used CSS to make the 'Hello' transition up as the page loads in the beginning. I would like to implement a shuffling animation that randomly shuffles between the word Hello in different languages. I would like to do so with an animation where as the 'Hello' slides up at the beginning, the 'Hello' slides up more, fades out and disappears. As this occurs, a 'Bonjour' for example slides up from beneath and takes place. I picture this repeating forever.
Is there any way to implement such animation using CSS, JavaScript, Jquery, or any other web tools? Below is the HTML, CSS, and JS structure I have that only achieves the initial transition as the page loads:
<body>
<section>
<h1 id="switch">Hello</h1>
</section>
</body>
section {
text-align: left;
}
section h1 {
font-size: 100px;
font-weight: 420;
position: absolute;
top: 130px;
left: 200px;
opacity: 0;
transform: translateY( 43px );
animation-name: fade-in;
animation-duration: 0.6s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
var currentIndex = 0;
var hello = new Array( 'Hello', 'Bonjour', 'Hola' );
function randomIndex( ) {
return Math.floor( Math.random( ) * hello.length);
};
window.setInterval( function( ) {
var newIndex = randomIndex( );
while( newIndex === currentIndex ) newIndex = randomIndex();
currentIndex = newIndex;
document.getElementById("switch").textContent = hello[ currentIndex ];
}, 2300 );
In CSS you need to set up #keyframes for your fade-in animation,. Then you can add a percentage of the duration that you wish to animate the animate-able properties opacity and top position. Make sure your duration matches the setInterval time => 2300 => 2.3s.
#keyframes:
In my example I set up a tween that will start at 0% with opacity 0 and top position in vh lengths, then as the tween reaches 70%, it is shown moving upwards to 5vh, where it will stay at an opacity of 1 until 90%, when its opacity will start to fade out. At 100% it will be opacity of 0, then the loop starts over as it is set to infinte in the css animation, the element will reset to 20vh and the animation repeats itself over again.
*You can play around with the percentages in the #keyframes rule to get the effect you're look for in terms of fading in and out movement, etc...
let currentIndex = 0;
const hello = ['Hello', 'Bonjour', 'Hola'];
function randomIndex() {
return ~~(Math.random() * hello.length);
};
window.setInterval(function() {
let newIndex = randomIndex();
while (newIndex === currentIndex) newIndex = randomIndex();
currentIndex = newIndex;
document.getElementById("switch").textContent = hello[currentIndex];
}, 2300);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
section {
text-align: center;
}
section h1 {
font-size: 100px;
font-weight: 420;
position: absolute;
top: 5vh;
left: 50vh;
opacity: 0;
animation: fade-in 2.3s ease-in-out forwards infinite;
}
#keyframes fade-in {
0% {
opacity: 0;
top: 20vh;
}
70%,
90% {
opacity: 1;
top: 5vh;
}
100% {
opacity: 0;
top: 5vh;
}
}
<body>
<section>
<h1 id="switch">Hello</h1>
</section>
</body>
As the greeting is not really semantic (you don't for example want it read out every few seconds to a screen reader) you could put it instead on the body (or another suitable element, depending on exactly the structure you want) in a pseudo before element. That way it is basically decoration, not meaning.
Also, to avoid timing issues, where a setInterval may get out of step with the timing of the keyframes animation, you can sense the animationend event and then set a timout for the next 300ms and then reset the animation to run again.
let currentIndex = 0;
const hello = ['Hello', 'Bonjour', 'Hola'];
function randomIndex() {
return ~~(Math.random() * hello.length);
};
function getNext() {
let newIndex = randomIndex();
while (newIndex === currentIndex) newIndex = randomIndex();
currentIndex = newIndex;
document.body.style.setProperty('--greeting', "'" + hello[currentIndex] + "'");
document.body.style.setProperty('--animationname', 'none');
setTimeout(function () {
document.body.style.setProperty('--animationname', 'move');
}, 300);
}
document.body.addEventListener('animationend',getNext);
body {
--greeting: 'Hello';
--animationname: move;
}
body::before {
content: var(--greeting);
animation-duration: 2s;
animation-iteration-count: 1;
animation-name: var(--animationname);
position: absolute;
top: 100%;
font-size: 100px;
font-weight: 420;
position: absolute;
left: 200px;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
#keyframes move {
0% {
top: 100%;
opacity: 0;
}
50% {
top: 50%;
opacity: 1;
}
100% {
top: 0%;
opacity: 0;
}
}
Obviously you'll want to change the timings, positionings etc to be exactly what you want.
so I have a question. I'm trying to start up CSS animation through Javascript/JQuery. The animation is of my navigation menu. It consists of 4 links each placed in a div with the width set to zero. The animation makes the width 100% of the parent's width at a delay for +100ms starting at 300 from top element to bottom so it appears as if the all come out separately to form the menu. Also a method to reverse the animation on click would be great as well. I tried using toggle() but was unsuccessful.
<div class="navbar">
<div id="nav1">Home</div>
<div id="nav2">About</div>
<div id="nav3">Work</div>
<div id="nav4">Msg</div>
</div>
Here is the javascript code
function expand() {
var navName = '#nav';
var delay = 0;
for(i = 1; i < 5; i++){
//Resets nav value
navName = '#nav';
delay = 200
//Adds number to class name
navName += i;
delay += 100;
//alert(navName + delay);
$(navName).css('animation', 'expand ease 500ms forwards');
$(navName).css('animation-delay', delay +'ms');
}
Rather than apply the animation property using JQuery, you could apply it by toggling a class. This class would contain the animation properties you need already.
$('.target').on('click', function() {
$(this).toggleClass('animate');
});
.target {
padding: 1em;
background: cornflowerblue;
}
.animate {
animation: expand 1s linear;
animation-delay: 200ms;
}
#keyframes expand {
0% {
transform: scale(1);
opacity: 0;
}
60% {
transform: scale(2);
opacity: 1;
}
100% {
transform: scale(1.5);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="target">click me</div>
my div should appears smoothly after a while, i think it needs a transition script code, this is my script that shows the div after 800 pixels scrolled down.
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 700) {
$('.menu').fadeIn();
} else {
$('.menu').fadeOut();
}
});
I don't know how to put transition in this code, sorry i don't know javascript at all
For a better experience use CSS transitions and not jQuery animations. The way to do it is to use your scroll function to add / remove classes from your menu element and than use css to create the fade in effect.
For example:
CSS
.menu {
opacity: 0;
visibility: hidden;
transition: all .4s ease-out;
-webkit-transition: all .4s ease-out;
}
.menu.show {
opacity: 1;
visibility: visible;
}
JS
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 700) {
$('.menu').addClass("show");
} else {
$('.menu').removeClass("show);
}
});
I have a html file created with cloudconvert.com that I wrapped with java script to highlight text inside it and scroll to first highlight using JQuery scrollTop() function. See example:
function doSearch2(text,color) {
if (window.find && window.getSelection) {
document.designMode = "on";
var sel = window.getSelection();
sel.collapse(document.body, 0);
while (window.find(text)) {
document.execCommand("HiliteColor", false, color);
sel.collapseToEnd();
}
document.designMode = "off";
} else if (document.body.createTextRange) {
var textRange = document.body.createTextRange();
while (textRange.findText(text)) {
textRange.execCommand("BackColor", false, color);
textRange.collapse(false);
}
}
var sel2 = document.getSelection();
var seltop = $(sel2.anchorNode.parentElement).offset().top;
var doccurrenttop = $('#page-container').scrollTop();
var scrollto = doccurrenttop + seltop - 70; // spce of 70px
if (scrollto < 0) { scrollto = 0; }
$('#page-container').scrollTop(scrollto);
}
doSearch2("Cross","yellow");
http://jsfiddle.net/3c3vx862/
I try to insert doSearch2() function into the head of the html file and load it on iframe inside new html document. Then I call doSearch2() from button on the outer document.
The scrollTop works fine, except on some cases (like scrolling to the bottom of the document and other random locations). When I debug it I find that sel2 (= document.getSelection()) is zero.
Any Ideas ?
Thanks !
Well it doesnt work probably for all that generated script and html you have there but you can take a look at this jsfiddle I made for you here.
Add this to your html page:
Top
Script
jQuery(document).ready(function($){
// browser window scroll (in pixels) after which the "back to top" link is shown
var offset = 300,
//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
offset_opacity = 1200,
//duration of the top scrolling animation (in ms)
scroll_top_duration = 700,
//grab the "back to top" link
$back_to_top = $('.cd-top');
//hide or show the "back to top" link
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
if( $(this).scrollTop() > offset_opacity ) {
$back_to_top.addClass('cd-fade-out');
}
});
//smooth scroll to top
$back_to_top.on('click', function(event){
event.preventDefault();
$('body,html').animate({
scrollTop: 0 ,
}, scroll_top_duration
);
});
});
CSS
.cd-top {
display: inline-block;
height: 40px;
width: 40px;
position: fixed;
bottom: 100px;
right: 10px;
z-index: 10;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
/* image replacement properties */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
background: rgba(232, 98, 86, 0.8) url(../img/cd-top-arrow.svg) no-repeat center 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
/* the button becomes visible */
visibility: visible;
opacity: 1;
}
.cd-top.cd-fade-out {
/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
opacity: .5;
}
.no-touch .cd-top:hover {
background-color: #e86256;
opacity: 1;
}
#media only screen and (min-width: 768px) {
.cd-top {
right: 20px;
bottom: 20px;
}
}
#media only screen and (min-width: 1024px) {
.cd-top {
height: 60px;
width: 60px;
right: 30px;
bottom: 30px;
}
}
jsFiddle here
I have div with id='mainmenu'. I'm adding CSS3 transition to it by JavaScript after button click (by adding 'transition' to #mainmenu and by creating class .fadein and .fadeout that will be added to the div element). Code:
<div id='mainmenu'></div>
<button id="btn1">Click me1</button>
<button id="btn2">Click me2</button>
#mainmenu {
width:100px;
height:100px;
background:#eee;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
transition: opacity 1s;
}
.fadeout {
opacity:0;
}
.fadein {
opacity:1;
}
var menu = document.getElementById('mainmenu'),
btn1 = document.getElementById('btn1'),
btn2 = document.getElementById('btn2');
btn1.addEventListener('click', function() {
menu.className = 'fadeout';
}
btn2.addEventListener('click', function() {
menu.className = 'fadein';
}
The problem is that now I want to add display none and block to fadeout and fadein option. So after the fadeout animation div should get display none, and after fadein display block:
btn1.addEventListener('click', function() {
menu.className = 'fadeout';
menu.style.display = 'none';
}
btn2.addEventListener('click', function() {
menu.className = 'fadein';
menu.style.display = 'block';
}
Unfortunately, the display none and block executes with the animation, so the animation isn't working (element gets display none, without the opacity animation). I want first the animation with opacity, and after that display none/block for the element. Is there any way to do it? I can use only pure JavaScript (no jQuery etc.).
You need to use setTimeout() with menu.style.display = "none"; in order to let fade do it's job before you trigger style.display.
btn1.addEventListener('click', function() {
menu.className = 'fadeout';
setTimeout(function() {
$(menu).css('display', 'none');
}, 1000);
}
btn2.addEventListener('click', function() {
menu.className = 'fadein';
setTimeout(function() {
$(menu).css('display', 'block');
}, 1000);
}
Although this is an old post, for future visitor's sake, you can use the transitionend event. You can use:
/*For when object has fully faded*/
menu.addEventListener("transitionend", function() {
if (this.className == "fadeout") {
this.style.display = "none";
}
}.bind(menu));
/*Show before animation starts*/
menu.addEventListener("click", function() {
this.style.display = "block";
}.bind(menu));
I could be wrong here, however i believe you need to add a transition-end trigger that does the display:block / display:none change.
see: CSS3 transition events
I use height 0 instead of display none for some cases but It may or may not apply for what you need. Anyway here's the code:
1) Using transitions (looks like jQuerys fadeOut):
.fadeOut{
opacity : 0;
height : 0;
transition : opacity 800ms, height 0 800ms;
}
if you want you can add width 0 too.
.fadeOut{
opacity : 0;
width : 0;
height : 0;
transition : opacity 800ms, height 0 800ms, width 0 800ms;
}
2) Using animations (it works but transitions is better):
.fadeOut{
animation : fadeout 800ms linear forwards;
}
#keyframes fadeout{
99%{
opacity : 0;
height : initial;
}
100%{
opacity : 0;
height : 0;
}
}