https://codepen.io/-dhaval-/pen/yMJKgE
above is the link of where i am trying this...
below is code:
function typeAp(target, toType, stepTime){
var n = 0;
var chars = Array.from(toType);
setInterval(function(){
$(target).append(chars[n]);
n++;
},stepTime);
};
typeAp('.init',"initializing",100);
body{
background-color:#ccc;
}
.container{
display:flex;
width:100%;
height:100vh;
justify-content:center;
align-items:center;
}
.cmd{
background-color:#111;
border-radius:5px;
padding:20px;
width:600px;
height:200px;
}
p{
letter-spacing:2px;
white-space: nowrap;
overflow: hidden;
font-family:courier;
color:lime;
}
::selection{
background:#111;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="cmd">
<p class="init">$Robot~ </p>
<p class="perc"> </p>
</div>
</div>
</body>
I want to add blinking "_" after each character so that it looks like the text is typed and it feels like command line.
Suggest any mistakes, or extra things i could add to this code if u like.
This is a pure jQuery solution, but it can also be done by css.
I've added a callback function to your typeAp and it insert the "_" and makes it blink.
This trigger the callback when its done writing.
if (n == chars.length) {
callback(target)
}
function typeAp(target, toType, stepTime, callback) {
var n = 0;
var chars = Array.from(toType);
setInterval(function() {
$(target).append(chars[n]);
n++;
if (n == chars.length) {
callback(target)
}
}, stepTime);
};
typeAp('.init', "initializing", 100, function(target) {
$(target).append("<span class='blink'>_</span>")
function blinker() {
$('.blink').fadeOut(500);
$('.blink').fadeIn(500);
}
setInterval(blinker, 1000);
});
body {
background-color: #ccc;
}
.container {
display: flex;
width: 100%;
height: 100vh;
justify-content: center;
align-items: center;
}
.cmd {
background-color: #111;
border-radius: 5px;
padding: 20px;
width: 600px;
height: 200px;
}
p {
letter-spacing: 2px;
white-space: nowrap;
overflow: hidden;
font-family: courier;
color: lime;
}
::selection {
background: #111;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="cmd">
<p class="init">$Robot~ </p>
<p class="perc"> </p>
</div>
</div>
</body>
You could use pseudoelement and simple animation:
.init::after {
content: '_';
display: inline-block;
animation: flash 1s linear infinite;
}
#keyframes flash {
50% {
opacity: 0;
}
}
codepen
Add the cursor to your HTML:
body
.container
.cmd
p.init
span.prompt $Robot~
span.cursor _
p.perc
Style the cursor:
.cursor {
animation: blink 1s linear infinite;
}
#keyframes blink {
50% { opacity: 0; }
}
And change the JS to target the new span:
typeAp('.prompt',"initializing",100);
Add to styles
.init::after {
content: '_';
animation: blink 0.2s linear infinite;
}
#keyframes blink {
0% {
opacity: 0;
}
100% {
opaicty: 1;
}
}
A possible solution with jQuery:
function typeAp(target, toType, stepTime){
$('.dash').hide();
var n = 0;
var chars = Array.from(toType);
var interval = setInterval(function(){
$(target).append(chars[n]);
n++;
if (n >= chars.length) {
clearInterval(interval);
$('.dash').show();
}
},stepTime);
};
setInterval(function() {
$('.dash').toggleClass('hide');
}, 700);
typeAp('.text',"initializing",100);
body{
background-color:#ccc;
}
.container{
display:flex;
width:100%;
height:100vh;
justify-content:center;
align-items:center;
}
.cmd{
background-color:#111;
border-radius:5px;
padding:20px;
width:600px;
height:200px;
}
p{
letter-spacing:2px;
white-space: nowrap;
overflow: hidden;
font-family:courier;
color:lime;
}
.dash.hide {
opacity: 0;
}
::selection{
background:#111;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="cmd">
<p>
$Robot~ <span class="text"></span><span class="dash">_</span>
</p>
</div>
</div>
</body>
Using CSS and pseudoelement :after
function typeAp(target, toType, stepTime){
target = $(target).addClass('typing');
var n = 0;
var chars = Array.from(toType);
var interval = setInterval(function(){
target.append(chars[n]);
n++;
if (n >= chars.length) {
clearInterval(interval);
target.removeClass('typing');
}
},stepTime);
};
typeAp('.init', "initializing", 100);
body{
background-color:#ccc;
}
.container{
display:flex;
width:100%;
height:100vh;
justify-content:center;
align-items:center;
}
.cmd{
background-color:#111;
border-radius:5px;
padding:20px;
width:600px;
height:200px;
}
p{
letter-spacing:2px;
white-space: nowrap;
overflow: hidden;
font-family:courier;
color:lime;
}
.init:not(.typing)::after {
content: '_';
animation: blink 1s ease .5s infinite;
opacity: 0;
}
#keyframes blink {
50% {
opacity: 1;
}
}
::selection{
background:#111;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="cmd">
<p class="init">$Robot~ </p>
<p class="perc"> </p>
</div>
</div>
</body>
Related
I am making a module which shows a modal. I added a button on modal to close it and added this.hide as it's onclick but this does not closes the modal
code:
class Modal {
constructor(content, allowclose, onclose) {
this.content = content;
this.allowclose = allowclose || true;
this.onclose = onclose;
// console.log(this.content)
document.body.innerHTML += `<div id='modal-js-bg'><div id='modal-js-main'><div id='modal-js-content'>${this.content}</div>
<div id='modal-js-close'><button id='modal-js-close-btn' disabled=${!this.allowclose} onclick=${this.hide}>Close</button></div></div></div>`
}
show() {
document.getElementById('modal-js-bg').style.display = 'flex';
document.getElementById('modal-js-main').style.animation = 'showmodal 325ms ease-in';
}
hide() {
document.getElementById('modal-js-bg').style.display = 'none';
document.getElementById('modal-js-main').style.animation = 'hidemodal 325ms ease-out';
}
}
#modal-js-bg{
width: 100vw;
height: 100vh;
position: absolute;
background-color: rgba(0,0,0,0.6);
display: none;
justify-content: center;
align-items: center;
}
#modal-js-main{
background-color:white;
width:50%;
padding:10px;
display: flex;
font-size:18px;
align-items: center;
flex-direction:column;
}
#modal-js-close-btn{
background-color: #2e2eff;
height:35px;
width: 80px;
border-radius: 7px;
color: white;
border: none;
}
#keyframes showmodal {
0%{
opacity:0;
}
100%{
opacity:1;
}
}
#keyframes hidemodal {
0%{
opacity:1;
}
100%{
opacity:0;
}
}
<html>
<head>
<title>modal</title>
</head>
<body>
<script>
window.onload = function () {
const mymodal = new Modal('this is example')
mymodal.show()
}
</script>
</body>
</html>
on document tree i can see that onclick function is written but every thing is written in small letters getElementById is written as getelementbyid
I am not able to solve this can anyone help
Thanks in advance
hey i try to fade in pause for a sec and fade out a span , im using class add and remove through timeout and interval . i cant figure it out someone can help?
i tried to do it with active class but i didnt make it .
i searched for it on google and found nothing with JS only Jquery that i dont want to use ATM
--------HTML----
<div class="desgin">
<div class="im__desgin"><h1>I'm Desgin.</h1></div>
<div class="what__design">
<span class="design-kinds ">WebSite's</span>
<span class="design-kinds">Logos</span>
<span class="design-kinds">Brands</span>
</div>
</div>
-----CSS-----
.desgin {
font-size: 40px;
/* color: aliceblue; */
color: #000;
align-items: center;
justify-content: space-between;
padding: 40px 150px;
position: relative;
float: left;
}
.what__design {
font-size: 8rem;
align-items: center;
float: left;
opacity: 1;
position: relative;
}
.design-kinds {
opacity: 0;
visibility: hidden;
position: absolute;
}
/* .design-kinds.active {
opacity: 1;
visibility: visible;
animation: fade 3s ease-in-out 3s 1;
} */
.design-kinds.fadein {
animation: fadeIn 1s ease-in;
visibility: visible;
}
.design-kinds.fadeout {
animation: fadeOut 1s ease-out;
visibility: hidden;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 100;
}
}
#keyframes fadeOut {
0% {
opacity: 100;
}
100% {
opacity: 0;
}
}
---JS---
const changeText = document.querySelector(".what__design");
const textToShow = document.querySelectorAll(".design-kinds");
//Fade in First span and fade out Last span
let index = 0;
let doneOrNot = "not";
function showText() {
const spans = [...textToShow];
if (index === spans.length - 1) {
index = 0;
}
if (doneOrNot === "done") {
doneOrNot = "not";
setTimeout(() => {
spans[index].classList.remove("fadein");
spans[index].classList.add("fadeout");
}, 4000);
index++;
console.log(doneOrNot);
}
if (doneOrNot === "not") {
spans[index].classList.add("fadein");
doneOrNot = "done";
console.log(doneOrNot);
}
}
setInterval(showText, 4000);
THANKS <3
If you want to animate it for a single time, than you don't want to need javascript.
.desgin {
font-size: 40px;
/* color: aliceblue; */
color: #000;
align-items: center;
justify-content: space-between;
padding: 40px 150px;
position: relative;
float: left;
}
.what__design {
font-size: 8rem;
align-items: center;
float: left;
opacity: 1;
position: relative;
}
.design-kinds {
position: absolute;
}
.web{
animation: animate1 4s 2s 1 ease-in-out ;
color: black;
opacity: 0;
}
.logo{
animation: animate1 4s 8s 1 ease-in-out ;
opacity: 0;
}
.brand{
animation: animate1 4s 14s 1 ease-in-out ;
opacity: 0;
}
#keyframes animate1{
0%,100%{
opacity: 0;
}
50%{
opacity: 10;
}
}
#keyframes animate2{
0%,100%{
opacity: 0;
}
50%{
opacity: 10;
}
}
#keyframes animate3{
0%,100%{
opacity: 0;
}
50%{
opacity: 10;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="desgin">
<div class="im__desgin"><h1>I'm Desgin.</h1></div>
<div class="what__design">
<span class="design-kinds web">WebSite's</span>
<span class="design-kinds logo">Logos</span>
<span class="design-kinds brand">Brands</span>
</div>
</div>
<!-- <script src="index.js"></script> -->
</body>
</html>
The given JS checks whether done is set, if it is immediately sets it to not and then checks if it's not and acts on that. This probably needs changing to an if...else combination.
Although you can do the animation by JS you may like to consider doing it with CSS as that should optimise the system's use of for example the GPU as you are only changing an animatable property (opacity).
While the specific example given here could be done entirely by CSS - setting up one set of keyframes which fade in, pause and fadeout a text for 33.3333% of the total animation time of 3*whatever seconds you choose - to be more general it adds a bit of JS which is run just once at the start to set up the keyframes to give the right %s however many texts there are.
This is done by setting CSS variables which are used in CSS calcs to give the overall animation time and the delay times - each text starts its animation offset depending on its index and then it runs forever.
<head>
<style>
.desgin {
font-size: 40px;
/* color: aliceblue; */
color: #000;
align-items: center;
justify-content: space-between;
padding: 40px 150px;
position: relative;
float: left;
}
.what__design {
font-size: 8rem;
align-items: center;
float: left;
opacity: 1;
position: relative;
}
.design-kinds {
opacity: 0;
/*visibility: hidden;*/
position: absolute;
animation: fadeInOut calc(var(--num) * var(--t)) infinite linear;
animation-delay: calc(var(--n) * var(--t));
animation-fill-mode: forwards;
}
</style>
<style id="keyframes">
</style>
</head>
<body>
div class="desgin">
<div class="im__desgin">
<h1>I'm Desgin.</h1>
</div>
<div class="what__design">
<span class="design-kinds ">WebSite's</span>
<span class="design-kinds">Logos</span>
<span class="design-kinds">Brands</span>
</div>
</div>
<script>
const showFor = 6; // set this to the number of seconds each text takes to fade in, pause for 1 second and fade out again
const whatDesign = document.querySelector('.what__design');
const designKinds = document.querySelectorAll('.design-kinds');
const len = designKinds.length;
whatDesign.style.setProperty('--num', len);
whatDesign.style.setProperty('--t', showFor + 's');
for (let n = 0; n < len; n++) {
designKinds[n].style.setProperty('--n', n);
}
const pcEachGets = 100 / len; // the percentage of total cycle time each bit of text gets
const pcForOneSecond = pcEachGets / showFor; // the % of total cycle time that equals 1 second - 1 second is the required pause time
const pcFadeInOrOut = (pcEachGets - pcForOneSecond) / 2;
document.querySelector('#keyframes').innerHTML = `#keyframes fadeInOut {
0% {
opacity: 0;
}
` + pcFadeInOrOut + `% {
opacity: 1;
}
` + (pcFadeInOrOut + pcForOneSecond) + `% {
opacity: 1;
}
` + pcEachGets + `% {
opacity: 0;
}
100% {
opacity: 0;
}
}`;
</script>
</body>
I think this will help you.
if you want this animation as a infinite loop.
const changeText = document.querySelector(".what__design");
const textToShow = document.querySelectorAll(".design-kinds");
//Fade in First span and fade out Last span
let index = 0;
function showText() {
setInterval(() => {
if (index < 2) {
textToShow[index].classList.add("fadeinOut");
index++;
}
else {
textToShow[index].classList.add("fadeinOut");
setTimeout(() => {
textToShow[2].classList.remove("fadeinOut");
}, 4000);
index = 0;
}
if (index > 0) {
setTimeout(() => {
textToShow[index - 1].classList.remove("fadeinOut");
}, 4000);
}
}, 5000);
}
showText();
.desgin {
font-size: 40px;
/* color: aliceblue; */
color: #000;
align-items: center;
justify-content: space-between;
padding: 40px 150px;
position: relative;
float: left;
}
.what__design {
font-size: 8rem;
align-items: center;
float: left;
opacity: 1;
position: relative;
}
.design-kinds {
opacity: 0;
visibility: hidden;
position: absolute;
}
/* .design-kinds.active {
opacity: 1;
visibility: visible;
animation: fade 3s ease-in-out 3s 1;
} */
.design-kinds.fadeinOut {
animation: fadeInOut 4s ease-in;
visibility: visible;
}
#keyframes fadeInOut {
0%,100% {
opacity: 0;
}
20%,80% {
opacity: 100;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="desgin">
<div class="im__desgin"><h1>I'm Desgin.</h1></div>
<div class="what__design">
<span class="design-kinds ">WebSite's</span>
<span class="design-kinds">Logos</span>
<span class="design-kinds">Brands</span>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
I figure some out but still i have a delay that i doest succeed to manage the delay after the function is done
<div class="im__desgin"><h1>I Desgin.</h1></div>
<div class="what__design">
<span class="design-kinds" id="Kind-1">WebSite's</span>
<span class="design-kinds" id="Kind-2">Logos</span>
<span class="design-kinds" id="Kind-3">Brands</span>
</div>
</div>
.desgin {
text-align: center;
font-size: 40px;
color: aliceblue;
align-items: center;
justify-content: space-between;
padding: 40px 150px;
position: relative;
float: left;
}
.what__design {
font-size: 8rem;
align-items: center;
float: left;
position: relative;
}
.design-kinds {
text-align: center;
opacity: 0;
position: absolute;
}
.effect {
animation: animate1 4s 2s 1 ease-in-out;
transform: scale(0.5);
opacity: 0;
}
#keyframes animate1 {
0%,
100% {
transform: scale(0.5);
opacity: 0;
}
30%,
50% {
transform: scale(1);
opacity: 10;
}
30% {
transform: scale(1);
opacity: 10;
}
}
const spans = document.querySelectorAll(".design-kinds");
//call function before page load
showText();
//Changing Text
function showText() {
//Kind --1--
$("#Kind-1").addClass("effect");
setTimeout(() => {
$("#Kind-1").removeClass("effect");
}, 6000);
//Kind --2--
setTimeout(() => {
$("#Kind-2").addClass("effect");
}, 3700);
setTimeout(() => {
$("#Kind-2").removeClass("effect");
}, 9800);
//Kind --3--
setTimeout(() => {
$("#Kind-3").addClass("effect");
}, 7700);
setTimeout(() => {
$("#Kind-3").removeClass("effect");
}, 14000);
}
setInterval(showText, 13000);
I have looked for this solution for days on end and I could not find the answer to why Javascript is not running correctly on the live server extension or local file host. I use Visual Studio Code and I am currently creating a webpage and trying to add JavaScript animations on it. However, its gotten to a point where I decided to copy other people's JS animations to see if it work for me and it still has not. For this code, I've made sure there are no errors whatsoever in the console and that the JS works properly on visual studio code. Both work but animations do not. Heres my code for a simple JS animation taken from https://webdesign.tutsplus.com/tutorials/animate-on-scroll-with-javascript--cms-36671.
Note: while even inputting this into the code snippet, it seems to run but it never works on live server or local hosts
const scrollElements = document.querySelectorAll(".js-scroll");
const elementInView = (el, dividend = 1) => {
const elementTop = el.getBoundingClientRect().top;
return (
elementTop <=
(window.innerHeight || document.documentElement.clientHeight) / dividend
);
};
const elementOutofView = (el) => {
const elementTop = el.getBoundingClientRect().top;
return (
elementTop > (window.innerHeight || document.documentElement.clientHeight)
);
};
const displayScrollElement = (element) => {
element.classList.add("scrolled");
};
const hideScrollElement = (element) => {
element.classList.remove("scrolled");
};
const handleScrollAnimation = () => {
scrollElements.forEach((el) => {
if (elementInView(el, 1.25)) {
displayScrollElement(el);
} else if (elementOutofView(el)) {
hideScrollElement(el)
}
})
}
window.addEventListener("scroll", () => {
handleScrollAnimation();
});
<style>
#import url("https://fonts.googleapis.com/css2?family=Merriweather&family=Merriweather+Sans:wght#300&display=swap");
/*General styling for structure*/
body {
margin: 0;
font-family: "Merriweather Sans", sans-serif;
}
.container {
max-width: 1280px;
width: 95%;
margin: 0 auto;
}
header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
font-family: "Merriweather", serif;
height: 100vh;
}
header h2 {
font-weight: 400;
}
.scroll-container {
height: 100vh;
min-height: 450px;
padding: 2rem 1rem;
display: flex;
align-items: center;
box-sizing: border-box;
}
.scroll-container:nth-of-type(1) {
background-color: #bdd0c4;
}
.scroll-container:nth-of-type(2) {
background-color: #f5d2d3;
}
.scroll-container:nth-of-type(3) {
background-color: #9ab7d3;
}
.scroll-container:nth-of-type(4) {
background-color: #dfccf1;
}
.scroll-container:nth-of-type(even) {
flex-direction: row-reverse;
}
.scroll-element,
.scroll-caption {
width: 50%;
}
.scroll-element {
min-height: 300px;
height: 100%;
background-color: #eaeaea;
}
.scroll-caption {
margin: 1rem;
}
footer {
text-align: center;
padding: 0.5rem 0;
background-color: #faddad;
}
footer p {
font-size: 0.75rem;
margin: 0.25rem 0;
color: #221133;
}
footer a {
text-decoration: none;
color: inherit;
}
#media screen and (max-width: 650px) {
.scroll-container,
.scroll-container:nth-of-type(even) {
flex-direction: column;
align-content: inherit;
}
.scroll-element {
height: 100%;
}
.scroll-element,
.scroll-caption {
width: 100%;
}
}
/**Styling scrollable elements*/
.js-scroll {
opacity: 0;
transition: opacity 500ms;
}
.js-scroll.scrolled {
opacity: 1;
}
.scrolled.fade-in {
animation: fade-in 1s ease-in-out both;
}
.scrolled.fade-in-bottom {
animation: fade-in-bottom 1s ease-in-out both;
}
.scrolled.slide-left {
animation: slide-in-left 1s ease-in-out both;
}
.scrolled.slide-right {
animation: slide-in-right 1s ease-in-out both;
}
#keyframes slide-in-left {
0% {
-webkit-transform: translateX(-100px);
transform: translateX(-100px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
#keyframes slide-in-right {
0% {
-webkit-transform: translateX(100px);
transform: translateX(100px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
#keyframes fade-in-bottom {
0% {
-webkit-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<head></head>
<body>
<header class="container">
<h1>How to Animate on Scroll With Vanilla JavaScript</h1>
<h2>Scroll to see the effects
<p class="animate-arrow">↓
</p>
</h2>
</header>
<section class="scroll-container">
<div class="scroll-element js-scroll fade-in">
</div>
<div class="scroll-caption">
This animation fades in.
</div>
</section>
<section class="scroll-container">
<div class="scroll-element js-scroll fade-in-bottom">
</div>
<div class="scroll-caption">
This animation slides in to the top.
</div>
</section>
<section class="scroll-container">
<div class="scroll-element js-scroll slide-left">
</div>
<div class="scroll-caption">
This animation slides in from the left.
</div>
</section>
<section class="scroll-container">
<div class="scroll-element js-scroll slide-right">
</div>
<div class="scroll-caption">
This animation slides in from the right.
</div>
</section>
<footer>
<p>Animation styles from animista.net</p>
<p>
Pen by Jemima Abu<span style="color: #D11E15"> ♥</span>
</p>
</footer>
</body>
Thank you all who responded to my question -
the answer was very simple and was actually mentioned by StackSlave
The script tag was in head and not at the end of the html file. The way around this is to add 'defer' at the end of the script tag. JS works perfectly now.
I want to smoothly display div from display:none to display:block. I know it can't be done to display:none, so I tried firstly to apply display:block and then perform transition, but this isn't working.
HTML
<input type="text" class="inp">
<div class="div"></div>
CSS
.div {
display: none;
visibility: hidden;
opacity: 0;
height: 100px;
width: 100px;
background: #000;
transition: 2s;
}
.block {
display:block;
}
.div-focused {
visibility: visible;
opacity: 1;
transition: 2s;
}
.one {
background: #ff0;
}
jQuery*
$(document).ready(function() {
$(".inp").on("keyup", function () {
if ( !$(this).val() ) {
$(".div").removeClass("one");
}
else {
$(".div").addClass("block");
$(".div").addClass("div-focused");
$(".div").addClass("one");
}
});
});
Here is the jsfiddle
$(document).ready(function() {
$(".inp").on("keyup", function () {
if ( !$(this).val() ) {
$(".div").removeClass("one");
}
else {
$(".div").addClass("block");
$(".div").addClass("one");
$(".div").animate({opacity: "1"},500);
}
});
});
jsfiddle
Try This
You asked for an hack ? Element.offsetTop is your friend.
When you request this property, the browser is forced to make a reflow of the page, so the class are added and the transitions can trigger, synchronously.
$(document).ready(function() {
$(".inp").on("keyup", function() {
var $div = $('.div');
if (!$(this).val()) {
$div.removeClass("one");
} else {
$div.addClass("block");
$div[0].offsetTop; // here is the magic
$div.addClass("div-focused one");
}
});
});
.div {
display: none;
visibility: hidden;
opacity: 0;
height: 100px;
width: 100px;
background: #000;
transition: 2s;
}
.block {
display: block;
}
.div-focused {
visibility: visible;
opacity: 1;
transition: 2s;
}
.one {
background: #ff0;
}
<input type="text" class="inp">
<div class="div"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
$(document).ready(function() {
$("div").hide();
$(".inp").on("keyup", function () {
if ( $(this).val()=="") {
$("div").fadeOut(3000);
} else {
$("div").fadeIn(4000);
}
});
});
.div {
height: 100px;
width: 100px;
background: red;
transition: 2s;
}
.block {
display:block;
}
.div-focused {
visibility: visible;
opacity: 1;
transition: 2s;
}
.one {
background: #ff0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="inp">
<div class="div"></div>
Replace your css and script with the below code.
/* style */
.div {
display: none;
height: 100px;
width: 100px;
background: #000;
}
/* Script */
$(document).ready(function() {
$(".inp").on("keyup", function () {
if ( !$(this).val() ) {
$(".div").css("opacity",0);
}
else {
var item = $(this).val();
var length = item.length;
var opacity = length/10;
$(".div").css("display","block");
$(".div").css("opacity",opacity);
}
});
});
Try dis : https://jsfiddle.net/priyaraj/ggqztzvh/
Anyone know how can I set auto-scroll (with loop) in div with overflow:hidden; ?
Example
<div class="container" style="width:500px; max-width:500px; height:100px; max-height:100px; background:#F00; overflow:hidden;">
<div class="element_01" style="width:500px; height:100px; float:left;"></div>
<div class="element_02" style="width:500px; height:100px; float:left;"></div>
</div>
final effect?
Show element_01 -> wait 5 sec -> smooth scroll to element_02 -> wait 5 sec // and repeat
This example uses positioning instead of scrolling.
Scrolling with an overflow hidden element works, but can be buggy.
http://codepen.io/anon/pen/tqgyA
$(document).ready(function() {
var numSlides = $('ul.scroller').children().length,
counter = 0;
windowHeight = $('.window').height();
setInterval(function() {
counter++;
if (counter == numSlides) {
counter = 0;
$('.scroller').css('top', '0');
} else {
var toMove = (counter * windowHeight);
$('.scroller').css('top', '-'+toMove.toString()+'px');
}
}, 2000)
});
html { font-family: Helvetica, Arial }
.window {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
border: 2px solid skyblue;
}
ul.scroller {
width: 100%;
position: absolute;
top: 0;
left: 0;
list-style-type: none;
padding: 0;
margin: 0;
-webkit-transition: top .5s ease;
transition: top .5s ease;
}
ul.scroller li {
width: 100%;
height: 200px;
box-sizing: border-box;
padding: 80px 0;
text-align: center;
font-size: 28px;
}
ul.scroller li:nth-child(2n+2) { background: #F5F5F5 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="window">
<ul class="scroller">
<li>
First Item
</li>
<li>
Second Item
</li>
<li>
Third Item
</li>
<li>
Fourth Item
</li>
</ul>
</div>
You can use scrollTo jQuery plugin:
http://demos.flesler.com/jquery/scrollTo/
and repeat a function using setTimeout(function(){ $.scrollTo('#element'); }, 5000);
With core javascript:
<div class="container" style="width:500px; max-width:500px; height:100px; max-height:100px; background:#F00; overflow:hidden;">
<div class="element_01" style="width:500px; height:100px; float:left;">aaa</div>
<div class="element_02" style="width:500px; height:100px; float:left;">bbb</div>
</div>
<script>
var container=document.getElementsByClassName('container')[0];
var start = 0;
var smoothVal = 20;
var waitVal = 5000;
function smooth(){
var interval=setInterval(function(){
start++;
container.scrollTop = start;
if(start>100) {
clearInterval(interval);
wait();
}
},smoothVal)
}
function wait(){
start = 0;
container.scrollTop = start;
setTimeout(function(){
smooth();
},waitVal)
}
smooth();
</script>