how to prevent horizontal scroll on css zoom animation - javascript

I want to use a landscape image, that zooms in to the landmark in the center and stays there.
I have one main issue with the current code I have..
That is the horizontal bar that turns up on zoom.
I want the image to have 100% width but the height to be about 80%
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link type="text/css" rel="stylesheet" href="css/animate.css">
<link type="text/css" rel="stylesheet" href="css/home1.css">
</head>
<body>
<div id="wrapper">
<a href="#">
<img src="images/zoom.jpg" alt="">
</a>
</div><!--wrapper-->
</body>
</html>
CSS :
a {
overflow:hidden;
width:100%;
}
a img {
text-decoration: none;
display: block;
width: 100%;
float: left;
margin: 0 3px 3px 0;
opacity: 1;
-webkit-transform: scale(1,1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transform: scale(1,1);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
}
a img:hover {
opacity: .7;
-webkit-transform: scale(2.05,2.07);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 250ms;
-moz-transform: scale(2.05,2.07);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 250ms;
position: relative;
z-index: 99;
}
I am also wondering if there is a way I can make it stay on zoomed in state once the hover is done, so that another element can appear at that point but the zoom is closer.
http://jsfiddle.net/itsnamitashetty/U4HTu/

Add display:block; to a css. It'll solve your issue.
Demo: http://jsfiddle.net/lotusgodkk/U4HTu/1/
a {
overflow:hidden;
width:100%;
display:block;
}

Related

Image Pop Up when hover with icon appears

so I had troubles with this one for quite a long time and couldn't find a solution, will be glad if anyone could help me with it. So basically what I have troubles with: I have an image with hover made by icon, I want to get image Pop Up when this icon appears and user clicks on it.
Here's my JSFiddle:https://jsfiddle.net/rissutei/wqyd48mj/17/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="galleryPicture">
<img src="https://cdn.pixabay.com/photo/2017/02/08/17/24/fantasy-2049567__480.jpg" alt="">
<i class="fas fa-plus"></i>
</div>
<script src="https://kit.fontawesome.com/9df2c8dd8e.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
</body>
</html>
*{
margin:0;
padding:0;
}
img {
display: block;
max-width: 100%;
height: auto;
}
div.galleryPicture {
padding:20px;
margin-bottom: 35px;
position: relative;
&:hover img {
opacity: 0.8;
filter: brightness(40%);
}
i {
position: absolute;
top: 50%;
left: 35%;
border-radius: 50%;
font-size: 34px;
color: #ffffff;
width: 60px;
height: 60px;
line-height: 60px;
transform: translate(-50%, -35%) scale(0);
transition: transform 0.5s 0ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
&:hover i {
transform: translate(-50%, -50%) scale(1);
transition: all 300ms 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
}

Hamburger animation with #keyframes?

I am working on a hamburger animation. I have done the animation with a simple css animation with a class, that I toggle in the js. The only problem with that of course is that the animation plays only when I toggle the class, and when I close it the div doesn't contain the class with the animation. I understand the problem, and I have done research but I couldn't find any that works with animation. Is it even possible to make it work with that?
Thanks!
Here is what I have so far:
const Close = () =>{
const burger = document.querySelector('.burger');
const line1 = document.querySelector('.line1');
const line2 = document.querySelector('.line2');
const line3 = document.querySelector('.line3');
burger.addEventListener('click', () =>{
line1.classList.toggle('line1-active');
line2.classList.toggle('line2-active');
line3.classList.toggle('line3-active');
});
}
Close();
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
background-color: black;
}
.burger{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.burger div{
background-color: white;
height: 5px;
width: 45px;
margin: 5px;
}
.line1-active{
position: relative;
top: 10px;
animation: top 0.3s ease-in both;
}
.line2-active{
opacity: 0;
transition: opacity 0.3s ease-out;
}
.line3-active{
position: relative;
bottom: 10px;
animation: bottom 0.3s ease-in both;
}
#keyframes top{
0%{
top: 0px;
}
33%{
top: 10px;
}
66%{
transform: rotate(0deg);
}
100%{
transform: rotate(45deg);
}
}
#keyframes bottom{
0%{
bottom: 0px;
}
33%{
bottom: 10px;
}
66%{
transform: rotate(0deg);
}
100%{
transform: rotate(-45deg);
}
}
<!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>Burger animation</title>
</head>
<body>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<script src="main.js"></script>
</body>
</html>

rotate logo after entering a new section

I'm a newbie and I'm using fullpage.js for the first time. I hope you can help me.
So my goal is to rotate my logo by 60deg each time I enter a new section. I have 5 sections.
I've been trying some stuff but its not what i desired. Right now I use this.
But it only applies to the section0, section1 and resets at section3.
Why isnt it working?
$(document).ready(function(){
$('#fullpage').fullpage({
//options
sectionsColor: ['#2f323a', '#2b32fa', '#2ff23a', '#2f003a', '#2f322b'],
easingcss: 'cubic-bezier(.31,.87,.89,.48)',
loopTop: true,
loopBottom: true,
navigation: true,
navigationPosition: 'right',
afterLoad: function(anchor, index) {
$('#logo').toggleClass('rotate1');
},
onLeave: function(index, nextIndex, direction) {
$('#logo').toggleClass('rotate2');
}
});
});
#logo {
position: fixed;
width:80px;
height:80px;
top: 20px;
left: 20px;
z-index: 100;
}
#logo.rotate1 {
transform: rotate(60deg);
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
#logo.rotate2 {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Website</title>
<link rel="stylesheet" href="assets/css/fullpage.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/main.css" type="text/css">
<script type="text/javascript">
</script>
</head>
<body>
<img id="logo" src="assets/img/logo.svg">
<div id="fullpage">
<div class="section"><h3>Section</h3>1</div>
<div class="section"><h3>Section</h3>2</div>
<div class="section"><h3>Section</h3>3</div>
<div class="section"><h3>Section</h3>4</div>
<div class="section"><h3>Section</h3>5</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/fullpage.min.js" type="text/javascript"></script>
<script src="assets/js/function.js" type="text/javascript"></script>
</body>
</html>
Using jquery data() and css() method
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#2f323a', '#2b32fa', '#2ff23a', '#2f003a', '#2f322b'],
easingcss: 'cubic-bezier(.31,.87,.89,.48)',
loopTop: true,
loopBottom: true,
navigation: true,
navigationPosition: 'right',
afterLoad: function(anchor, index) {
let angle = +$('#logo').data('angle') + 60;
$('#logo')
.css({'transform': `rotate(${angle}deg)`})
.data('angle', angle);
}
});
});
#logo {
position: fixed;
width: 80px;
height: 80px;
top: 20px;
left: 20px;
z-index: 100;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
.as-console {
display: none!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.5/fullpage.min.css" />
<img id="logo" src="https://via.placeholder.com/80" data-angle="-60">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.5/fullpage.min.js"></script>
<div id="fullpage">
<div class="section">
<h3>Section</h3>1</div>
<div class="section">
<h3>Section</h3>2</div>
<div class="section">
<h3>Section</h3>3</div>
<div class="section">
<h3>Section</h3>4</div>
<div class="section">
<h3>Section</h3>5</div>
</div>

CSS3: Lines of text sliding into page at different times

I have the code shown below that slides text into the page from right to left using css3 animation. I am using a different animation-delay for each line, but I have the problem that before the animation starts the lines are already visible on the left, and I don't want that.
Are there any meansa) to keep the text lines invisible before animation starts or
b) a simple way to load the lines at different times (maybe using javascript setTimeout?) or other tricks?
(note: I am using Firefox 35.0.1)
Help would be much appreciated!
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
animation-name: slidein;
animation-duration: 2s;
animation-timing-function: ease-in-out;
color: red;
font-size: 3.5em;
font-family: Arial;
font-weight:bold;
}
#keyframes slidein {
0% { margin-left: 100%; }
100% { margin-left: 0%; }
}
</style>
</head>
<body>
<h1 style="animation-delay: 0s;">ONE</h1>
<h1 style="animation-delay: 1s;">TWO</h1>
<h1 style="animation-delay: 3s;">THREE</h1>
</body>
</html>
You may simply set an higher value to margin-left, for example "101%", and texts disappear.
Anyway I suggest you tu replace margin-left with CSS translation, according to this link, for better performance. In this last case, due to particular behaviour of CSS transformation (explained here) you also don't need overflow:hidden on Body tag in order to avoid horizontal scrollbars.
#keyframes slidein {
0% { transform: translate(101%); }
100% { transform: translate(0%); }
}
Or, if you don't want to set a "strange" more than 100% value, you could combine my solution, with #Herrington Darkholme's one.
Just add opacity: 0; to the initial element and opacity: 1; to the animation.
However, you need to retain the opacity after the animation ends. So the animation-fill-mode: forwards; comes to help.
Update: using transform: translate(100%); thanks to #Luca Detomi
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
<!DOCTYPE html>
<html>
<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>
<head>
<style>
h1 {
animation-name: slidein;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
color: red;
font-size: 3.5em;
font-family: Arial;
font-weight:bold;
opacity: 0;
}
#keyframes slidein {
0% { transform: translate(101%); opacity:1; }
100% { transform: translate(0%); opacity:1;}
}
</style>
</head>
<body>
<h1 style="animation-delay: 0s;">ONE</h1>
<h1 style="animation-delay: 1s;">TWO</h1>
<h1 style="animation-delay: 3s;">THREE</h1>
</body>
</html>
Add margin-left to more than 100%
h1 {
animation-name: slidein;
animation-duration: 5s;
animation-timing-function: ease-in-out;
color: red;
font-size: 3.5em;
font-family: Arial;
font-weight:bold;
margin-left: 105%;
}
#keyframes slidein {
0% { margin-left: 105%; }
100% { margin-left: 0%; }
}
Here is another solution to the same problem:
We start with witdh:0px and overflow:hidden; (invisible) and end width:300px.
<!DOCTYPE html>
<html>
<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>
<head>
<style>
h1 {
animation-name: slidein;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
color: red;
font-size: 3.5em;
font-family: Arial;
font-weight:bold;
width:0px;
overflow:hidden;
}
#keyframes slidein {
0% { margin-left: 100%; width:300px; }
100% { margin-left: 0%; width:300px;}
}
</style>
</head>
<body>
<h1 style="animation-delay: 0s;">ONE</h1>
<h1 style="animation-delay: 1s;">TWO</h1>
<h1 style="animation-delay: 2s;">THREE</h1>
</body>
</html>

Appended div couldn't scroll

In google chrome I append a div. When I click the button the red div will slide out but it can't scroll with mouse wheel.
The bug only happens in google chrome.
This is an example page:http://infinitynewtab.com/question/test.html
html, css and js:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
margin: 0px;
overflow: hidden;
}
#right{
width:350px;
height:100%;
position: absolute;
top:0px;
right:-350px;
background-color: red;
overflow-y:scroll;
}
#button{
width:180px;
height:40px;
padding: 5px;
background-color:rgb(75, 197, 142);
margin-top: 200px;
margin-left: auto;
margin-right: auto;
color:#fdfdfd;
border-radius: 10px;
cursor: pointer;
}
#-webkit-keyframes slideOut{
0% {
transform:translate(0px);
-webkit-transform:translate(0px);
}
100% {
transform:translate(-350px);
-webkit-transform:translate(-350px);
}
}
.slideOut{
animation:slideOut ease 0.3s;
-webkit-animation:slideOut ease 0.3s;
transform:translate(-350px);
-webkit-transform:translate(-350px);
}
</style>
</head>
<body>
<div id="button">Click me,then scroll in the red area</div>
<script src="jquery2.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var str='';
for (var i = 0; i <10000; i++) {
str+=i+'<br>';
};
$('body').append('<div id="right">'+str+'</div>');
});
$("#button").on('click',function(event) {
/* Act on the event */
$('#right').addClass('slideOut');
});
</script>
</body>
</html>
You cat try it may be it's help
CSS add z index as like this
#right{
z-index:2;
}
#button{
z-index:1;
}
Live Demo
The problem is with the slideOut class. Not sure why. But this works:
.slideOut{
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-ms-transition: all .3s ease-in;
transition: all .3s ease-in;
right: 0 !important;
}
If you want the page to scroll don't set the div's height to 100%.
The way you implemented this you can scroll only after focusing the div. this is not a bug...

Categories