I created a web page that scrolls horizontally when you scroll vertical. And I want the scrolled value on scrolling. Here is what I have done
* {
padding: 0;
margin: 0;
}
#log {
position: fixed;
width: 500px;
height: 25px;
border: solid black 1px;
z-index: 999;
}
img{
position: fixed;
z-index: 999;
top: 50%;
left: 90vw;
transform: translate(0, -50%);
cursor: pointer;
user-select: none;
}
.outer-wrapper {
height: 100vw;
width: 100vh;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-x: hidden;
overflow-y: scroll;
position: absolute;
scrollbar-width: none; /*---Firefox property---*/
-ms-overflow-style: none; /*---i.e. family---*/
}
::-webkit-scrollbar {
display: none; /*---Chrome and Safari*/
}
.wrapper {
display: flex;
flex-direction: row;
height: 100vh;
width: 400vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
}
.slide {
height: 100vh;
width: 100vw;
}
.slide1 {
background-color: teal;
}
.slide2 {
background-color: tomato;
}
.slide3 {
background-color: slateblue;
}
.slide4 {
background-color: palevioletred;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Horizonral scroll</title>
</head>
<body>
<img draggable="false" src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_right_alt1-512.png" alt="arrow_right" width="70px" height="70px">
<div class="outer-wrapper">
<div class="wrapper">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
<div class="slide slide4"></div>
</div>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
I tried using window.addEventListener('scroll') but not getting any scrolled value. I tried debugging Js code in chrome but function is not even invoking on scrolling.
window.addEventListener('scroll', () => {
console.log(Scrolled);
});
You need to set addEventListener on scroll of div.outer-wrapper and get scrollTop
document.getElementsByClassName("outer-wrapper")[0].addEventListener('scroll', function(e) {
var div = document.getElementsByClassName("outer-wrapper")[0].scrollTop;
console.log(div);
});
* {
padding: 0;
margin: 0;
}
#log {
position: fixed;
width: 500px;
height: 25px;
border: solid black 1px;
z-index: 999;
}
img{
position: fixed;
z-index: 999;
top: 50%;
left: 90vw;
transform: translate(0, -50%);
cursor: pointer;
user-select: none;
}
.outer-wrapper {
height: 100vw;
width: 100vh;
transform: rotate(-90deg) translateX(-100vh);
transform-origin: top left;
overflow-x: hidden;
overflow-y: scroll;
position: absolute;
scrollbar-width: none; /*---Firefox property---*/
-ms-overflow-style: none; /*---i.e. family---*/
}
::-webkit-scrollbar {
display: none; /*---Chrome and Safari*/
}
.wrapper {
display: flex;
flex-direction: row;
height: 100vh;
width: 400vw;
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
}
.slide {
height: 100vh;
width: 100vw;
}
.slide1 {
background-color: teal;
}
.slide2 {
background-color: tomato;
}
.slide3 {
background-color: slateblue;
}
.slide4 {
background-color: palevioletred;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Horizonral scroll</title>
</head>
<body>
<img draggable="false" src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_right_alt1-512.png" alt="arrow_right" width="70px" height="70px">
<div class="outer-wrapper">
<div class="wrapper">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
<div class="slide slide4"></div>
</div>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
You can use element.scrollTop and element.scrollLeft to get the vertical and horizontal offset, respectively, that has been scrolled. element can be document.body if you care about the whole page. You can compare it to element.offsetHeight and element.offsetWidth (again, element may be the body) if you need percentages.
Related
im currently working on a project for my company and im pretty new to html and css.
my question is this, im trying to make a menu resize its size when i hover on top of it so the submenu is open.
the div .itemMenu should go from width 100% to 50%, so the submenu (.itemSubmenu) can be shown
here are some pics
and this is my code
/* Variables */
:root {
--Gray: #323a3a;
--DarkBlue: #123B79;
--LightBlue: #18A5A7;
--LightGray: #D9D9D9;
--White: white;
}
/* Body tools */
body {
margin: 0 auto;
user-select: none;
overflow: hidden;
background-color: black;
}
/* Container */
.container {
display: flex;
flex-direction: row;
position: fixed;
width: 100%;
height: 100%;
}
/* Left DIV */
.left {
display: flex;
flex-direction: row;
width: 20%;
border: 3px solid green;
}
.itemMenu {
text-align: center;
height: 100%;
width: 100%;
background-color: var(--Gray);
}
.itemMenu span {
color: white;
font-size: 30px;
}
.itemSubmenu {
display: none;
}
.itemMenu:hover>.itemSubmenu {
display: flex;
height: 100%;
width: 100%;
margin-left: 100%;
background-color: white;
}
/* Right DIV */
.right {
display: flex;
flex-direction: column;
width: 80%;
}
.content {
width: 100%;
height: 70%;
background-color: var(--Gray);
border: 5px solid yellow;
}
.bottom {
width: 100%;
height: 30%;
background-color: var(--DarkBlue);
border: 10px solid red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="left">
<div class="itemMenu">
<div class="itemSubmenu"></div>
</div>
</div>
<div class="right">
<div class="content"></div>
<div class="bottom"></div>
</div>
</div>
</body>
</html>
Good day ^^
I've spent a few minutes creating something similar using #keyframes. Unfortunately they are a bit janky for how I used them but it works, here's the code;
*{margin: 0px; padding: 0px;}
body{background-color: lightblue;}
/* Menu Area */
.Menus{background-color: darkred; position: fixed; left: 0vw; top: 0px; width: 20vw; height: 100vh; display: grid; grid-template-columns: 100% 0%;}
.Menus:hover{animation: PopOutMenu 0.2s forwards;}
/* Menus */
.Menu1, .Menu2{height: 100%;}
.Menus .Menu1{background-color: red;}
.Menus .Menu2{background-color: orange; color: transparent;}
.Menus .Menu2:hover{animation: DisplayMenu 1s forwards;}
/* Main Content */
.Main{background-color: blue; margin-left: 20vw;}
/* Keyframe Animations */
#keyframes PopOutMenu{
0%{grid-template-columns: 100% 0%;}
01%{grid-template-columns: 90% 10%;}
25%{grid-template-columns: 80% 20%;}
50%{grid-template-columns: 70% 30%;}
75%{grid-template-columns: 60% 40%;}
100%{grid-template-columns: 50% 50%;}
}
#keyframes DisplayMenu{
0%{color: transparent;}
100%{color: black;}
}
<body>
<section class="Menus">
<div class="Menu1">
<h1>Menu1</h1>
<a>Link One</a>
<a>Link Two</a>
<a>Link Three</a>
</div>
<div class="Menu2">
<h1>Menu2</h1>
<a>This Page1</a>
<a>This Page2</a>
<a>This Page3</a>
</div>
</section>
<div class="Main">
<h1>Menu</h1>
<a>Test</a>
<a>Test</a>
<a>Test</a>
</div>
</body>
Perhaps this can be helpful to you. Tweak it how you'd like and perhaps change it out for something smoother later.
Version 2
I've kept working on it. This is much smoother.
*{margin: 0px; padding: 0px;}
body{background-color: lightblue;}
a{display: block;}
/* Menu Area */
.Menus{position: fixed; left: 0vw; top: 0px; width: 20vw; height: 100vh; display: grid; grid-template-columns: 100% 0%;}
.Menus:hover{animation: PopOutMenu 0.25s forwards;}
/* Menus */
.Menu1, .Menu2{height: 100%;}
.Menus .Menu1{background-color: dimgray;}
.Menus .Menu2{background-color: gray; position: absolute; left: 10vw; z-index: -1; width: 50%;}
/* Main Content */
.Main{background-color: blue; margin-left: 20vw;}
/* Keyframe Animations */
#keyframes PopOutMenu{
0%{grid-template-columns: 100% 0%;}
10%{grid-template-columns: 95% 05%;}
20%{grid-template-columns: 90% 10%;}
30%{grid-template-columns: 85% 15%;}
40%{grid-template-columns: 80% 20%;}
50%{grid-template-columns: 75% 25%;}
60%{grid-template-columns: 70% 30%;}
70%{grid-template-columns: 65% 35%;}
80%{grid-template-columns: 60% 40%;}
90%{grid-template-columns: 55% 45%;}
100%{grid-template-columns: 50% 50%;}
}
<body>
<section class="Menus">
<div class="Menu1">
<h1>Menu1</h1>
<a>Link One</a>
<a>Link Two</a>
<a>Link Three</a>
</div>
<div class="Menu2">
<h1>Menu2</h1>
<a>This Page1</a>
<a>This Page2</a>
<a>This Page3</a>
</div>
</section>
<div class="Main">
<h1>Main Content</h1>
<h2>Greetings and welcome to our site!</h2>
</div>
</body>
Hopefully that can be beneficial to you.
I am trying to build a card which when it is not hovered, you can see only the image.
When the image is hovered, it should grow up and a div pops to the right of the image presenting some information.
For some reason, when I hover the image, everything works fine. But when my mouse hovers to the div besides it, everything starts to shake as if the hover is not working well.
I've tried to change the hover effect both to the image and the parent div which contains both divs but nothing fixed it.
What should I do?
$(document).ready(function(){
document.querySelector(`.personCard-0 .imgCard img`).addEventListener("mouseover", () => hoverAnimation(0), false);
document.querySelector(`.personCard-0 .imgCard img`).addEventListener("mouseout", () => disableHoverAnimation(0), false);
})
const hoverAnimation = (index) => {
console.log('inside add animation');
$(`.personCard-${index}`).toggleClass('active');
$(`.personCard-${index} .personalInfoCard`).toggleClass('active');
}
const disableHoverAnimation = (index) => {
console.log('inside remove animation');
$(`.personCard-${index}`).toggleClass('active');
$(`.personCard-${index} .personalInfoCard`).toggleClass('active');
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
.cards{
display: flex;
}
.personCard{
display: flex;
margin: 10px;
transition: all 0.4s ease-in-out;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.63);
border-radius: 10px;
overflow: hidden;
}
.personCard.active{
transform: scale(1.5);
}
.imgCard{
height: 200px;
width: 130px;
overflow: hidden;
transition: all 0.4s ease-in-out;
}
.imgCard img{
height: 200px;
width: 130px;
}
.personalInfoCard{
background-color: palevioletred;
display: flex;
height: 200px;
width: 0px;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: -1;
font-size: 14px;
transition: all 0.4s ease-in-out;
}
.personalInfoCard.active{
width: 200px;
display: flex;
z-index: 1;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!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">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cards">
<div class="personCard-0 personCard" >
<div class="imgCard">
<img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
</div>
<div class="personalInfoCard">
<p>Name: Rand name</p>
<p>Age: Rand age</p>
<p>Job: Rand job</p>
<p>Study: Rand proffesion</p>
</div>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
Change your target to be the card container so that when it grows, you'll still be hovering over it. As it is now, your target is the image - which when it animates left triggers the mouseout
$(document).ready(function() {
document.querySelector(`.personCard-0`).addEventListener("mouseover", () => hoverAnimation(0), false);
document.querySelector(`.personCard-0`).addEventListener("mouseout", () => disableHoverAnimation(0), false);
})
$(document).ready(function() {
document.querySelector(`.personCard-0`).addEventListener("mouseover", () => hoverAnimation(0), false);
document.querySelector(`.personCard-0`).addEventListener("mouseout", () => disableHoverAnimation(0), false);
})
const hoverAnimation = (index) => {
console.log('inside add animation');
$(`.personCard-${index}`).toggleClass('active');
$(`.personCard-${index} .personalInfoCard`).toggleClass('active');
}
const disableHoverAnimation = (index) => {
console.log('inside remove animation');
$(`.personCard-${index}`).toggleClass('active');
$(`.personCard-${index} .personalInfoCard`).toggleClass('active');
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 50vh;
display: flex;
justify-content: center;
align-items: center;
}
.cards {
display: flex;
}
.personCard {
display: flex;
margin: 10px;
transition: all 0.4s ease-in-out;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.63);
border-radius: 10px;
overflow: hidden;
}
.personCard.active {
transform: scale(1.5);
}
.imgCard {
height: 200px;
width: 130px;
overflow: hidden;
transition: all 0.4s ease-in-out;
}
.imgCard img {
height: 200px;
width: 130px;
}
.personalInfoCard {
background-color: palevioletred;
display: flex;
height: 200px;
width: 0px;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: -1;
font-size: 14px;
transition: all 0.4s ease-in-out;
}
.personalInfoCard.active {
width: 200px;
display: flex;
z-index: 1;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!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">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cards">
<div class="personCard-0 personCard">
<div class="imgCard">
<img src="https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
</div>
<div class="personalInfoCard">
<p>Name: Rand name</p>
<p>Age: Rand age</p>
<p>Job: Rand job</p>
<p>Study: Rand proffesion</p>
</div>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
I'm struggling to hide the navbar on scroll down. I know how to do it, but just because of some silly mistake I'm unable to do so, and can't figure out what the issue is.
Here's the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div id="navbar">
<div id="logo">
<a href="#">
<h1>My logo</h1>
</a>
</div>
<ul id="menu">
<li><a class="link-button" href="#">HOME</a></li>
<li><a class="link-button" href="#">ARTICLES</a></li>
<li><a class="link-button" href="#">PROJECTS</a></li>
<li><a class="link-button" href="#">AUTHOR</a></li>
<li><a class="link-button" href="#">CONTACT</a></li>
</ul>
</div>
<div id="welcome">
<h1 id="welcome-text">My Portfolio</h1>
</div>
<div class="container">
</div>
<!-- Here script for hidding navbar on scroll down -->
<script>
window.addEventListener("scroll", function(){
let Navbar = document.getElementById('navbar');
if(window.pageYOffset > 0){
Navbar.classList.add("navbar-scroll");
}else{
Navbar.classList.remove("navbar-scroll");
}
});
</script>
</body>
</html>
And here's the full css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
height: 100vh;
perspective: 1px;
transform-style: preserve-3d;
overflow-x: hidden;
overflow-y: auto;
}
html{
overflow: hidden;
}
#navbar{
position: sticky;
width: 100%;
top: 0;
transition: background 0.5s;
background-color: transparent;
z-index: 2;
}
#navbar #logo{
float: left;
margin: 10px;
}
#navbar #logo a{
font-size: 155%;
color: #ffffff;
text-decoration: none;
}
#navbar ul{
float: right;
justify-content: space-around;
list-style: none;
align-items: center;
padding: 20px;
}
#navbar ul li{
display: inline-block;
}
/* === Here I'm changing the display property of the navbar to none to make it disappear. === */
#navbar.navbar-scroll{
display: none;
}
.link-button{
display: block;
text-align: center;
margin: 0 15px;
font-size: 89%;
color: #ffffff;
text-decoration: none;
}
.link-button::after{
content: '';
display: block;
width: 0;
height: 2px;
margin-top: 2px;
background: #ffffff;
transition: width .3s;
}
.link-button:hover::after{
width: 100%;
transition: width .3s;
}
#welcome{
height: 100vh;
width: 100vw;
box-sizing: border-box;
}
#welcome::before{
content: "";
height: 100vh;
width: 100vw;
top: 0;
left: 0;
background: linear-gradient(#0000008e, #0000008e), url('static/bc22.jpg');
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
z-index: -1;
transform: translateZ(-2px) scale(3);
}
#welcome-text{
color: #ffffff;
position: absolute;
top: 50%;
left: 26%;
transform: translate(-50%, -50%);
/* text-align: center; */
font-size: 600%;
}
.container{
background-color: #1f1f1f;
height: 1000px;
}
In the CSS I've also tried changing the background colour of the navbar on scroll (in the #navbar.navbar-scroll), but it ain't working as well. So most probably the error is in the javascript I think.
If there's a better way of hiding the navbar on scroll then that's welcomed as well.
Thanks for your time.
Actually the problem lies under your HTML overflow: hidden;. So when you set your HTML overflow to hidden, the window.addEventListener("scroll", function () {}) will never invoke, because window will never scroll at all. So to fix this you should either remove html{overflow: hidden;} from your styles or add your event listener to listen to your body element instead, which is not recommended.
From your CSS, it seems your goal is to have the body as the scroll container and not <HTML> itself.
Something like this should work as your JavaScript:
document.body.addEventListener("scroll", function(){
let Navbar = document.getElementById('navbar');
if(document.body.scrollTop > 0){
Navbar.classList.add("navbar-scroll");
}else{
Navbar.classList.remove("navbar-scroll");
}
});
Pretty much every tag which can have children can be scrollable if you define it in your CSS. That means you will have to listen to the right element in JS too.
I am trying to create a loader for my website using css and javascript and it has to look something like
so far i am able to create the slider but I am unable to put the box behind the slider. what should I do.
Edit- Sorry if was not clear but I want the orange slider as an animated loader
HTML -
<div style="margin-left:400px; margin-right:400px " class="progress-wrap
progress" data-progress-percent="20">
<div class="progress-bar progress"></div>
</div>
CSS -
#import "compass/css3";
.red{
background:black;
margin-left:300px;
top:100px;
}
.box{
width:100px !important;
height:100px !important;
z-index:-1;
}
.progress {
width: 100%;
height: 10px;
}
.progress-wrap {
background: #f80;
margin: 200px 0;
overflow: hidden;
position: relative;
.progress-bar {
background: white;
left: 0;
position: absolute;
top: 0;
}
}
Javascript-
moveProgressBar();
$(window).load(function() {
moveProgressBar();
});
function moveProgressBar() {
console.log("moveProgressBar");
var getPercent = ($('.progress-wrap').data('progress-percent') / 100);
var getProgressWrapWidth = $('.progress-wrap').width();
var progressTotal = getPercent * getProgressWrapWidth;
var animationLength = 6500;
$('.progress-bar').stop().animate({
left: progressTotal
}, animationLength);
}
So far I am able to create the slider but I am unable to put the box behind the slider. What should I do?
One solution is to set the progress bar to position: absolute and position it over the boxes.
As for the progress percent. You're updating a data attribute so you can just set the width of the bar based on that value. The animation can be handled by a CSS transition transition: width 1s.
Live demo: http://jsfiddle.net/rg0bq23p/45/
Javascript
var progress = document.getElementById('progress');
var bar = progress.querySelector('.bar');
bar.style.width = progress.dataset.progress + '%';
HTML
<div class="wrapper">
<div id="progress" class="progress" data-progress="20">
<div class="bar"></div>
</div>
<div class="box dark-gray"></div>
<div class="box gray"></div>
</div>
SCSS
.wrapper {
width: 400px;
margin: 0 auto;
display: flex;
position: relative;
.progress {
position: absolute;
top: 150px;
left: -100px;
z-index: 1;
width: 90%;
background-color: #fff3e2;
.bar {
width: 0;
height: 15px;
background-color: #ffa41c;
transition: width 1s;
}
}
.box {
width: 200px;
height: 200px;
&.gray {
background-color: #bbb;
}
&.dark-gray {
background-color: #888;
}
}
}
I solved the problem using only HTML and CSS:
The result will be exactly as you want in the example you mentioned
.main{
float: right;
}
.box{
position: relative;
}
.bar{
position: absolute;
top: 105px;
right: 111px;
}
.left{
width: 143px;
height: 143px;
background: #595d59;
display: inline-block;
margin-right: -2px;
}
.right{
width: 143px;
height: 143px;
background: #b8b9b8;
display: inline-block;
margin-left: -2px;
}
.progress-bar{
width: 268px;
height: 11px;
background: #f26522;
}
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="main" >
<div class="box">
<div class ="left"></div>
<div class ="right"></div>
</div>
<div class="bar">
<div class="progress-bar"></div>
</div>
</div>
</body>
</html>
For animation, you can use a setInterval to increase the width of the progress bar every 200 milliseconds.
.main{
float: right;
}
.box{
position: relative;
}
.bar{
position: absolute;
top: 105px;
right: 111px;
width: 100%;
border: 1px solid black;
}
.left{
width: 143px;
height: 143px;
background: #595d59;
display: inline-block;
margin-right: -2px;
}
.right{
width: 143px;
height: 143px;
background: #b8b9b8;
display: inline-block;
margin-left: -2px;
}
.progress-bar{
width: 5%;
height: 11px;
background: #f26522;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="main" >
<div class="box">
<div class ="left"></div>
<div class ="right"></div>
</div>
<div class="bar">
<div class="progress-bar"></div>
</div>
</div>
<script>
var width = 5;
var progress;
progress= setInterval(function(){
$('.progress-bar').css("width", width + "%");
width += 5;
if(width>=105){
clearInterval(progress);
}
}, 200);
</script>
</body>
</html>
JSFiddle: http://jsfiddle.net/21jdo8q7/1/
I am trying to move in text from bottom of the div that is a red tile on hover , but when i hover the text is visible from outside the tile ,and moves in , what i want is for it to seem like it moved in from bottom of the tile.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/myscript.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="tile">
<div class="front">
</div>
<div class="back"></div>
</div>
</body>
</html>
CSS:
body{
background-color: black;
}
.tile{
background: red;
margin-left: 400px;
margin-top: 200px;
height: 100px;
width: 200px;
color: white;
z-index:-1;
}
.tile:HOVER {
transform: rotateY(360deg);
z-index:-1;
}
.back{
top: 100px;
position: absolute;
}
Jquery:
$(document).ready(function(){
$(".tile").hover(function(){
$(".front").hide().empty();
$(".back")
$(".back").show().append("<h3>Welcome</h3>" +
"<p>This is th content being changed</p>");
$(".back").animate({top:'-=100px',opacity:"1"},"slow");
},function(){
$(".back").animate( {top:"+=100px",opacity:"0"},"fast").hide().empty();
$(".front").show().append("<h3>Hello<h3>");
});
});
.tile {
background: red;
margin-left: 400px;
margin-top: 200px;
height: 100px;
width: 200px;
color: white;
overflow: hidden; // add this line
z-index: -1;
}
overflow: hidden;
Content is clipped if necessary to fit the padding box. No scrollbars
are provided.
which means the text outside the range of .tile will be invisible.
See MDN
$(document).ready(function() {
$(".tile").hover(function() {
$(".front").hide().empty();
$(".back")
$(".back").show().append("<h3>Welcome</h3>" +
"<p>This is th content being changed</p>");
$(".back").animate({
top: '-=100px',
opacity: "1"
}, "slow");
}, function() {
$(".back").animate({
top: "+=100px",
opacity: "0"
}, "fast").hide().empty();
$(".front").show().append("<h3>Hello<h3>");
});
});
body {
background-color: black;
}
.tile {
background: red;
margin-left: 400px;
margin-top: 200px;
height: 100px;
width: 200px;
color: white;
overflow: hidden;
z-index: -1;
}
.tile:HOVER {
transform: rotateY(360deg);
z-index: -1;
}
.back {
top: 100px;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tile">
<div class="front">
</div>
<div class="back"></div>
</div>