Hi I'm still beginner at CSS, html and JS. I tried to do a transition ease-out for the property left, cuz I.m doing an animated galery for my future purposes. I tested it in the browser, the images where changing but the transition didn't happened.
Here is my "index.html":
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="galery">
<img class="galery_comp" src="img/leaf.jpg">
<img class="galery_comp" src="img/spital.jpg">
<img class="galery_comp" src="img/nature.jpg">
<img class="galery_comp" src="img/forest.jpg">
</div>
<br>
<button type="button" id="back"><-- Back</button>
<button type="button" id="next">Next --></button>
<script src="Galery.js"></script>
<script src="sketch.js"></script>
</body>
</html>
Here is my "style.css":
div.galery{
display: flex;
transition: left 0.4s ease-out; /* This is where i tried */
}
img{
width: 600;
height: 500;
display: none;
}
Here is my "Galery.js":
function Galery(){
this.imgs = document.getElementsByClassName('galery_comp');
this.currentImage = 0;
this.offSet = 0;
var hide = false;
this.sleep = function(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
this.init = function(){
this.imgs[0].style.display = "block"
}
this.next = function(){
this.currentImage++;
if (this.currentImage >= this.imgs.length)
{
this.currentImage = 0;
for (var i = 0; i < this.imgs.length; i++){
this.imgs[i].style.left = 0;
this.imgs[i].style.display = "none";
}
}
this.imgs[this.currentImage].style.display = "inline";
this.offSet=0;
}
this.slideNext = function(){
this.imgs[this.currentImage].style.left = -parseInt(window.getComputedStyle(this.imgs[0], null).width) - this.offSet;
this.imgs[this.currentImage].style.display = "none";
this.offSet = 10;
this.next();
}
this.slideBack = function(){
if (this.currentImage === 0){
this.currentImage = this.imgs.length;
for (var i = 0; i < this.imgs.length; i++){
this.imgs[i].style.left = -parseInt(window.getComputedStyle(this.imgs[0], null).width);
this.imgs[i].style.display = "none";
}
}
this.currentImage--;
this.imgs[this.currentImage].style.display = "inline";
this.imgs[this.currentImage].style.left = 0;
if (this.currentImage + 1 < this.imgs.length)
this.imgs[this.currentImage + 1].style.display = "none";
}
}
And finally here is my sketch.js:
var galery = new Galery();
galery.init();
document.getElementById('next').addEventListener("click", function(){
galery.slideNext();
});
document.getElementById('back').addEventListener("click", function(){
galery.slideBack();
});
Did i made something wrong? Or i should use another tehnique. If you want to test it you can use whatever images you want and how many you want(only keep the "galery_comp" class for the js)
Any answear apreciated!
You should add the transition to your img.
Your also setting (in your js) the display to none.
So you're basically removing the img before the transition can be seen. displayis also a non-transitionable attribute
Instead of display, try using opacity and setting it to either 0 or 1 (depending wether you want to show it or not)
then you could also add a transition for your opacity (maybe differently timed) and have a nice effect)
img{
width: 600;
height: 500;
opacity: 0;
transition: left 0.4s ease-out, opacity 0.3s ease-out;
}
Related
When I'm linking Bootstrap 5 its just fading out the text instead of fading in.
When I remove the link everything just work fine.
const animatedText = document.querySelector(".fancy");
const strText = animatedText.textContent;
const splitText = strText.split("");
animatedText.textContent = "";
for (let i = 0; i < splitText.length; i++) {
animatedText.innerHTML += "<animated>" + splitText[i] + "</animated>";
}
let char = 0;
let timer = setInterval(onTick, 50);
function onTick() {
const animated = animatedText.querySelectorAll('animated')[char];
animated.classList.add('fade');
char++
if (char === splitText.length) {
complete();
return;
}
}
function complete() {
clearInterval(timer);
timer = null;
}
animated {
opacity: 0;
transition: all 0.4s ease;
}
animated.fade {
opacity: 1;
}
<h2 class="fancy">WELCOME TO MY WORLD</h2>
Bootstrap have .fade class in CSS which is responsible for "fade out" alert boxes.
Change your "fade" class to "text-fade" or something else and everything will be okay.
Im trying to move sections up and down on the wheel event by changing class on previous, inView and next sections. so every wheel event will change the activeIndex and hence classes to each sections. Also when the window is loaded the starting activeIndex = 0 so that it always starts from the top. i want to know is my approach correct? is it correct to add class to activeIndex and classes to sections before and after like:
Var previousSection = section[activeIndex - 1];
previousSection.classList.add("previous")
Var inViewSection = section[activeIndex];
inViewSection.classList.add("inView");
Var nextSection = section[activeIndex + 1];
nextSection.classList.add("next");
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
home, body {
margin: 0;
padding: 0;
overflow: hidden;
user-select: none;
}
section {
position: absolute;
left: 0;
width: 100vw;
height: 100vh;
transition: 1s ease-out;
}
.first {background-color:black;}
.second {background-color:red;}
.third {background-color:blue;}
.fourth {background-color:green;}
.fifth {background-color:yellow;}
.inView {top: 0;}
.previous {top: -100vh;}
.next {top: 100vh;}
</style>
<script>
window.load = function() {
var activeIndex = 0;
}
window.addEventListener("wheel", event => {
const delta = Math.sign(event.deltaY);
//console.info(delta);
if (delta > 0) {
nextSection();
}
else if (delta < 0) {
previousSection();
}
});
section: document.querySelectorAll(".section");
activeIndex: 0;
function nextService() {
if (activeIndex = sections.length) return;
let previousService = section[activeIndex - 1];
previousService.classList.add("previous");
let activeService = section[activeIndex];
activeService.classList.add("inView");
let nextService = section[activeIndex + 1];
nextService.classList.add("next");
activeIndex++;
//update the above variables
}
</script>
</head>
<body>
<section class="first section"></section>
<section class="second section"></section>
<sectionc class="third section"></sectionc>
<section class="fourth section"></section>
<section class="fifth section"></section>
</body>
</html>
You can't use Var as capital letter. It must be var with lowercase.
Wrong
Var previousSection = section[activeIndex - 1];
Var inViewSection = section[activeIndex];
Var nextSection = section[activeIndex + 1];
Correct
var previousSection = section[activeIndex - 1];
var inViewSection = section[activeIndex];
var nextSection = section[activeIndex + 1];
I have three images which my two div's switch between. However, the animation appears too rough. How do I apply a fade right before the switch?
<div class="my-images">
<div id="image-1"></div>
<div id="image-2"></div>
</div>
<script>
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
document.getElementById("image-1").style.backgroundImage = images[x];
document.getElementById("image-2").style.backgroundImage = images[x];
}
function startTimer() {
setInterval(displayNextImage, 10000);
}
var images = [],
x = 0;
images[0] = "url('images/snow.jpeg')";
images[1] = "url('images/nike.jpeg')";
images[2] = "url('images/motor.jpeg')";
</script>
This loops continuously so I do not want it just fading in on the first load.
Without JQuery you'll have cross-browser compatibility issue.
So i suggest you to use JQuery to achieve this.
<div class="my-images">
<div class="my-image" id="image-1"></div>
<div class="my-image" id="image-2"></div>
</div>
<script>
function displayNextImage() {
$("#image-" + x).css('backgroundImage', images[x]).show('slow');
x++;
}
var images = [],
x = 0;
images[0] = "url('images/snow.jpeg')";
images[1] = "url('images/nike.jpeg')";
images[2] = "url('images/motor.jpeg')";
</script>
And you have to add this to css:
.my-image{
display:none;
}
In case you not use display: block to you element:
Your CSS will be:
.my-image{
display:whatYouWant;
}
Then need add the document ready() function and change show() to fadeIn():
$(document).ready(function(){
$(".my-image").hide();
});
function displayNextImage() {
$("#image-" + x).css('backgroundImage', images[x]).fadeIn('slow');
x++;
}
This will work because fadeIn() set to display the previous value.
If you want div visible before image adding, remove $(document).ready() call and edit displayNextImage():
function displayNextImage() {
$("#image-" + x).hide().css('backgroundImage', images[x]).fadeIn('slow');
x++;
}
You can do it with CSS animation, for each cycle:
1) swap the image sources like you are already doing
2) reset the fade in animation, more info here
3) increment your index
const imgs = [
'https://source.unsplash.com/iMdsjoiftZo/100x100',
'https://source.unsplash.com/ifhgv-c6QiY/100x100',
'https://source.unsplash.com/w5e288LU8SU/100x100'
];
let index = 0;
const oldImage1 = document.getElementById('oldImage1');
const newImage1 = document.getElementById('newImage1');
const oldImage2 = document.getElementById('oldImage2');
const newImage2 = document.getElementById('newImage2');
window.setInterval(() => {
// put new image in old image
oldImage1.src = newImage1.src;
oldImage2.src = newImage2.src;
// Set new image
newImage1.src = imgs[index];
newImage2.src = imgs[index];
// reset animation
newImage1.style.animation = 'none';
newImage1.offsetHeight; /* trigger reflow */
newImage1.style.animation = null;
newImage2.style.animation = 'none';
newImage2.offsetHeight; /* trigger reflow */
newImage2.style.animation = null;
// increment x
index = index + 1 >= imgs.length ? 0 : index + 1;
}, 1500);
.parent {
position: relative;
top: 0;
left: 0;
float: left;
}
.oldImage1 {
position: relative;
top: 0;
left: 0;
}
.newImage1 {
position: absolute;
top: 0;
left: 0;
}
.oldImage2 {
position: relative;
top: 0;
left: 100;
}
.newImage2 {
position: absolute;
top: 0;
left: 100;
}
.fade-in {
animation: fadein 1s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
<div class="parent">
<img id="oldImage1" class="oldImage1" src="https://source.unsplash.com/ifhgv-c6QiY/100x100" />
<img id="newImage1" class="newImage1 fade-in" src="https://source.unsplash.com/w5e288LU8SU/100x100" />
</div>
<div class="parent">
<img id="oldImage2" class="oldImage2" src="https://source.unsplash.com/ifhgv-c6QiY/100x100" />
<img id="newImage2" class="newImage2 fade-in" src="https://source.unsplash.com/w5e288LU8SU/100x100" />
</div>
I have a series of images I want to transition from 0 opacity to 1 opacity when they come into the view port. I have the viewport check part done and the adding classes, however I would like them to be on an interval, so once the first 3 images come into the view port they appear 1, 2, 3 every .5seconds or so. Instead of all 3 at the same time.
here's a JS fiddle of how it works currently
reveal();
function reveal() {
var reveal = document.querySelectorAll(".reveal");
window.onscroll = function() {
for(var i = 0; i < reveal.length; i++) {
if(checkVisible(reveal[i]) === true) {
reveal[i].classList.add("fade");
}
}
}
};
function checkVisible(elm) {
var rect = elm.getBoundingClientRect();
var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
return !(rect.bottom < 0 || rect.top - viewHeight >= -200);
}
https://jsfiddle.net/u04sy7jb/
I've modified your code to add a transition-delay of an additional .5 seconds for each element after the first one, in each "group" that is revealed as you scroll. I left comments in the JavaScript so you can understand the changes.
Let me know if you have any questions!
Live demo:
reveal();
function reveal() {
var reveal = document.querySelectorAll(".reveal");
window.onscroll = function() {
// start a new count each time user scrolls
count = 0;
for (var i = 0; i < reveal.length; i++) {
// also check here if the element has already been faded in
if (checkVisible(reveal[i]) && !reveal[i].classList.contains("fade")) {
// add .5 seconds to the transition for each
// additional element currently being revealed
reveal[i].style.transitionDelay = count * 500 + "ms";
reveal[i].classList.add("fade");
// increment count
count++;
}
}
}
};
function checkVisible(elm) {
var rect = elm.getBoundingClientRect();
var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
return !(rect.bottom < 0 || rect.top - viewHeight >= -200);
}
.container {
width: 100%;
height: 1200px;
background-color: orange;
}
.reveal {
display: inline-block;
width: 32%;
margin: 0 auto;
height: 400px;
background-color: pink;
border: 1px solid black;
opacity: 0;
}
.fade {
opacity: 1;
transition: 1s;
}
<div class="container">
<div class="reveal"></div>
<div class="reveal"></div>
<div class="reveal"></div>
<div class="reveal"></div>
<div class="reveal"></div>
<div class="reveal"></div>
<div class="reveal"></div>
<div class="reveal"></div>
<div class="reveal"></div>
</div>
You could be able to stick your reveal[i].classList.add("fade"); inside of a setTimeout that executes as a function of your ith element so they show up how you're describing. Here is an example of adding short function to add the class and using it in a setTimeout to make this happen, although you could change it up to meet any additional needs.
function reveal() {
var reveal = document.querySelectorAll(".reveal");
window.onscroll = function() {
for(var i = 0; i < reveal.length; i++) {
if(checkVisible(reveal[i]) === true) {
addMyFadeClass(reveal[i], i)
}
}
}
};
function addMyFadeClass(element, i) {
setTimeout(function() {
element.classList.add("fade");
}, i * 500)
}
You can also use :nth-child CSS selectors without the need to change the JS:
.reveal:nth-child(3n+1).fade {
opacity: 1;
transition: 1s;
}
.reveal:nth-child(3n+2).fade {
opacity: 1;
transition: 1.5s;
}
.reveal:nth-child(3n).fade {
opacity: 1;
transition: 2s;
}
JSFiddle: https://jsfiddle.net/u04sy7jb/8/
I am trying to repeatedly display some sentences letter by letter using some fade in/fade out effect.However, when trying to do that, it seems that words break in the middle as shown below. How can I avoid word breaking?
var quotes = document.getElementsByClassName('quote');
var quoteArray = [];
var currentQuote = 0;
quotes[currentQuote].style.opacity = 0;
for (var i = 0; i < quotes.length; i++) {
splitLetters(quotes[i]);
}
function changeQuote() {
var cw = quoteArray[currentQuote];
var nw = currentQuote == quotes.length-1 ? quoteArray[0] : quoteArray[currentQuote+1];
for (var i = 0; i < cw.length; i++) {
animateLetterOut(cw, i);
}
for (var i = 0; i < nw.length; i++) {
nw[i].className = 'letter behind';
nw[0].parentElement.style.opacity = 1;
animateLetterIn(nw, i);
}
currentQuote = (currentQuote == quoteArray.length-1) ? 0 : currentQuote+1;
}
function animateLetterOut(cw, i) {
setTimeout(function() {
cw[i].className = 'letter out';
}, 0);
}
function animateLetterIn(nw, i) {
setTimeout(function() {
nw[i].className = 'letter in';
}, 340+(i*30));
}
function splitLetters(quote) {
var content = quote.innerHTML;
console.log(quote.innerHTML);
quote.innerHTML = '';
var letters = [];
for (var i = 0; i < content.length; i++) {
var letter = document.createElement('span');
letter.className = 'letter';
letter.innerHTML = content.charAt(i)==' '?' ':content.charAt(i);
quote.appendChild(letter);
letters.push(letter);
}
quoteArray.push(letters);
}
changeQuote();
setInterval(changeQuote, 10000);
body {
font-weight: 600;
font-size: 40px;
}
.text {
position: relative;
}
.quote {
position: absolute;
opacity: 0;
}
.letter {
display: inline-block;
position: relative;
float: left;
-webkit-transform: translateZ(25px);
transform: translateZ(25px);
-webkit-transform-origin: 50% 50% 25px;
transform-origin: 50% 50% 25px;
}
.letter.out {
visibility: hidden;
opacity: 0;
transition: visibility 0s 0.7s, opacity 0.7s linear;
}
.letter.behind {
visibility: hidden;
opacity: 0;
}
.letter.in {
visibility: visible;
opacity: 1;
transition: opacity 0.7s linear;
}
<body>
<div class="text">
<p>
<span class="quote">TEXT ONE(1): For example, if you are designing a brand new website for someone, most times you will have to make sure the prototype looks finished by inserting text or photos or what have you. </span>
<span class="quote">TEXT TWO(2): The purpose of this is so the person viewing the prototype has a chance to actually feel and understand the idea behind what you have created.</span>
</p>
</div>
Your setInterval(changeQuote, 5000) is the source of the effect you have cleverly developed finishing short. Initially I began to play with the 5000ms and changing it to 15000ms down to around 8000~10000ms is what seemed to make it work best.
Change it to setInterval(changeQuote, 9000) and see the difference.
However, thinking of scalability, you will need to figure out a way to make it so that the setInterval waits until the quoteArray has finished pushing the letters.
EDIT
Based on the feedback in the comments, I determined the following:
On the JavaScript side of things, each letter is a <span> meaning that each served as an individual element. What was lacking was to create a word to wrap around each sentence. This is would ensure that each word would wrap around according to its parent container.
On the CSS side of things, the container of the letters meaning quote needed styling which would allow it to better represent its contents. By adding white-space: nowrap, display: block I managed to give its children a container which would adapt depending on the screen width.
See the below snippet fixed from the provided one for reference.
var quotes = document.getElementsByClassName('quote'),
quoteArray = [],
currentQuote = 0;
quotes[currentQuote].style.opacity = 0;
for (var i = 0; i < quotes.length; i++) {
splitLetters(quotes[i]);
}
function changeQuote() {
var cw = quoteArray[currentQuote];
var nw = currentQuote == quotes.length - 1 ? quoteArray[0] : quoteArray[currentQuote + 1];
for (var i = 0; i < cw.length; i++) {
animateLetterOut(cw, i);
}
for (var i = 0; i < nw.length; i++) {
nw[i].className = 'letter behind';
nw[0].parentElement.style.opacity = 1;
animateLetterIn(nw, i);
}
currentQuote = (currentQuote == quoteArray.length - 1) ? 0 : currentQuote + 1;
}
function animateLetterOut(cw, i) {
setTimeout(function() {
cw[i].className = 'letter out';
}, 0);
}
function animateLetterIn(nw, i) {
setTimeout(function() {
nw[i].className = 'letter in';
}, 340 + (i * 30));
}
function splitLetters(quote) {
var content = quote.innerHTML,
words = [],
word = document.createElement('span');
word.className = "word";
word.innerHTML = "";
quote.innerHTML = "";
for (var i = 0; i < content.length; i++) {
var letter = document.createElement('span');
letter.className = 'letter';
if(content.charAt(i) !== " "){
letter.innerHTML = content.charAt(i);
word.innerHTML = word.innerHTML.concat(letter.innerHTML);
}
else {
letter.innerHTML = " ";
word.innerHTML = word.innerHTML.concat(letter.innerHTML);
quote.appendChild(word);
words.push(word);
word = document.createElement('span');
word.className = "word";
}
}
quoteArray.push(words);
}
changeQuote();
setInterval(changeQuote, 10000);
body {
font-weight: 600;
font-size: 40px;
}
.text {
position: relative;
}
.quote {
position: absolute;
display: block;
opacity: 0;
white-space: nowrap;
}
.letter {
display: inline-block;
position: relative;
float: left;
-webkit-transform: translateZ(25px);
transform: translateZ(25px);
-webkit-transform-origin: 50% 50% 25px;
transform-origin: 50% 50% 25px;
}
.letter.out {
visibility: hidden;
opacity: 0;
transition: visibility 0s 0.7s, opacity 0.7s linear;
}
.letter.behind {
visibility: hidden;
opacity: 0;
}
.letter.in {
visibility: visible;
opacity: 1;
transition: opacity 0.7s linear;
}
<div class="text">
<p>
<span class="quote">TEXT ONE(1): For example, if you are designing a brand new website for someone, most times you will have to make sure the prototype looks finished by inserting text or photos or what have you. </span>
<span class="quote">TEXT TWO(2): The purpose of this is so the person viewing the prototype has a chance to actually feel and understand the idea behind what you have created.</span>
</p>
</div>