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);
}
}
Related
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>
I have a search bar when focused moves up with an animation
I want the same with image placed on top of the search bar...
so that when we click on search bar image gets smaller and move in top left corner and search bar moves up in sync animation.
right now i have managed to move search bar but stuck at image part...
I am trying to detect focus with JS and then make transition for image too but margin-left and margin bottom is not working...
Can anyone help to complete it? please
var input = document.getElementById("SearchBar");
var homeImage = document.getElementById("homeImage");
input.addEventListener("focus", function () {
homeImage.classList.add('horizTranslate');
});
#SearchBar {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 40%;
box-sizing: border-box;
border: 3px solid;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('search-icon.svg');
background-position: 10px 10px;
background-repeat: no-repeat;
border-color: #ffaf7b;
padding: 12px 20px 12px 40px;
transition: width 0.8s ease, top 0.5s ease, border-color 0.5s ease;
}
#homeImage {
position: absolute;
top: 28%;
left: 45%;
}
#SearchBar:focus {
width: 90%;
top: 22%;
border-color: #ff512f;
}
.horizTranslate {
transition: 3s;
margin-right: 50%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="HandheldFriendly" content="true">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<input id="SearchBar" placeholder="XXXXX...">
<img src="https://via.placeholder.com/150" src="pattern-img.png" alt="Girl in a jacket" id="homeImage"><script src="ui.js" type="text/javascript"></script>
</body>
</html>
here is codepen
with no javascript
CSS:
#SearchBar {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 40%;
box-sizing: border-box;
border: 3px solid;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url("search-icon.svg");
background-position: 10px 10px;
background-repeat: no-repeat;
border-color: #ffaf7b;
padding: 12px 20px 12px 40px;
transition: width 0.8s ease, top 0.5s ease, border-color 0.5s ease;
}
#homeImage {
position: absolute;
top: 28%;
left: 45%;
transition: 1s;
}
#SearchBar:focus {
width: 90%;
top: 22%;
border-color: #ff512f;
transition: 1s;
margin-right: 50%;
}
#SearchBar:focus+#homeImage {
top: 0;
left: 80%;
transition: 1s;
}
I am trying to make a glitchy text effect for a website. On Stackoverflow it works completes fine. Good so far.
But the Problem is in my project folder it doesn't. If you want to check it out, heres a link to download it:
Download
Here's the HTML, CSS and jQuery code:
$(document).ready(
$('.textglitch').hover(function(){
var eLtext = $(this).text(), eLchild = $(this).find('.textglitch-link');
//console.log(eLchild);
eLchild.attr('data-content', eLtext);
eLchild.toggleClass('blur');
$(this).toggleClass('active');
}));
/*----TAGS----*/
*{
margin: 0px;
padding: 0px;
font-family: 'Roboto', monospace;
}
body{
background-color: black;
background: repeat url("../img/noise.gif");
outline:none;
list-style:none;
text-decoration:none;
}
/*----CLASS----*/
.main_div{
position: fixed;
top: 0px; left: 0px; right: 0px; bottom: 0px;
width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.8);
}
/*----ANIMATE----*/
.textglitch {
position: relative;
text-align: center;
margin: 0 auto;
cursor: pointer;
z-index: 1;
font-size: 5vw;
font-weight: 700;
margin: 50px 0;
}
.textglitch .textglitch-link {
position: relative;
display: inline-block;
}
.textglitch-link span {
position: relative;
z-index: 2;
color: #fff;
}
.blur {
filter: blur(1px);
-webkit-filter: blur(1px);
}
.textglitch .textglitch-link:after,
.textglitch .textglitch-link:before {
position: absolute;
top: 0px;
left: 0px;
content: attr(data-content);
visibility: hidden;
}
.textglitch.active .textglitch-link:after,
.textglitch.active .textglitch-link:before {
visibility: visible;
}
.textglitch .textglitch-link:before {
color: rgba(255, 0, 188, 0.8);
-webkit-animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) both infinite;
animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) both infinite;
}
.textglitch .textglitch-link:after {
color: rgba(0,255,255,0.8);
-webkit-animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) reverse both infinite;
animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) reverse both infinite;
}
#keyframes textglitch {
0% {
-webkit-transform: translate(0);
transform: translate(0)
}
20% {
-webkit-transform: translate(-3px, 3px);
transform: translate(-3px, 3px)
}
40% {
-webkit-transform: translate(-3px, -3px);
transform: translate(-3px, -3px)
}
60% {
-webkit-transform: translate(3px, 3px);
transform: translate(3px, 3px)
}
80% {
-webkit-transform: translate(3px, -3px);
transform: translate(3px, -3px)
}
to {
-webkit-transform: translate(0);
transform: translate(0)
}
}
<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<link rel="stylesheet" href="../css/theme.css">
<script type="text/javascript" src="../js/master.js"></script>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main_div">
<div class="textglitch">
<a class="textglitch-link"><span>This is a Test</span></a>
</div>
</div>
</body>
</html>
I would be glad if someone could help me to fix this problem.
I looked at your code and it has the following problems:
The main file must be called index.html and it must be stored in teh root - it cannot be in a subfolder. Therefore, you will need to also update your links in the <head> (ie. js/master.js not ../js/master.js and css/theme.css not ../css/theme.css)
Change your js code to:
$(document).ready(function(){ //<=== i.e. missing the: " function(){ "
$('.textglitch').hover(
function(){
var eLtext = $(this).text(), eLchild = $(this).find('.textglitch-link');
console.log(eLchild);
eLchild.attr('data-content', eLtext);
eLchild.toggleClass('blur');
$(this).toggleClass('active');
});
});
Make sure jQuery is loaded before the master.js file.
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="js/master.js"></script>
<div class="main_div">
I've got an issue in Firefox.
This works in chrome, and safari and mobile.
When you click the card, it flips over, but you can still see the "click to flip" front facing part of the card when you click on it to flip it over. It shows up as upside-down text. I've tried targeting the css to hide/show when the card css has the class of "flipped", but it still won't disappear.
Again this is a Firefox issue. Any suggestions would be great.
$('.card').click(function(){
$(this).toggleClass('flipped');
});
.card-height2: {
height: 281px;
}
.flip {
-webkit-perspective: 800;
perspective: 800;
position: relative;
cursor: pointer;
}
.flip .card.flipped {
-webkit-transform: rotatex(-180deg);
transform: rotatex(-180deg);
background: transparent;
}
.flip .card {
height: 195px;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;
}
.flip .card .face {
-webkit-backface-visibility: hidden ;
backface-visibility: hidden ;
z-index: 2;
}
.flip .card .front {
position: absolute;
width: 100%;
z-index: 1;
background: #2B5168;
}
.flip .card .back {
-webkit-transform: rotatex(-180deg);
transform: rotatex(-180deg);
padding-left: 5%;
}
.flip .card .back2 {
-webkit-transform: rotatex(-180deg);
transform: rotatex(-180deg);
padding-left: 5%;
padding-bottom: 13%;
}
.inner {
margin:0px
!important;
}
div.card.card-1 {
height: 195px;
background: transparent;
background: #2B5168;
}
.s7-small {
font-size: 14px;
}
.s7-percents {
color: #80c3db;
font-size: 51px;
font-weight: 800;
margin: 0px;
}
.s7-heading1 {
font-size: 27px;
text-align: left;
margin-top: 55px;
margin-left: 50px;
}
.s7-heading2 {
font-size: 27px;
margin: 0px;
}
.s7-para {
font-size: 27px;
color: #85B9CE;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="row">
<div class="col-lg-6 p-0">
<div class="flip s7-card-1">
<div class="card card-1">
<div class="face front">
<div class="inner">
<p class="s7-heading1">Click to flip</p>
</div>
</div>
<div class="face back">
<div class="inner">
<p class="s7-small">Flipped!</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
http://jsbin.com/yobeweseri/edit?html,css,js,output
Add transform: rotateX(0deg); to the .face.front container.
See this answer: Backface-Visibility Not Working Properly in Firefox (Works in Safari)
So I need to be able to check if a specified id has a specific class, but I'm not completely sure on how to do that.
Here is my code. You can see my attempt at checking a id for a specific class in the homeTransition function.
function homeTransition()
{
if(document.getElementById("aboutContent").hasClass("animated fadeInUp")){
document.getElementById("aboutContent").className = " animated slideOutDown";
} else if(document.getElementById("projectsContent").hasClass("animated fadeInUp")){
document.getElementById("projectsContent").className = " animated slideOutDown";
} else if(document.getElementById("contactContent").hasClass("animated fadeInUp")){
document.getElementById("contactContent").className = " animated slideOutDown";
}
document.getElementById("astronaut").className = " animated fadeIn";
}
function aboutTransition()
{
document.getElementById("astronaut").className = " animated fadeOut";
document.getElementById("aboutContent").className = " animated fadeInUp";
document.getElementById("projectsContent").className = " animated fadeOutLeft";
document.getElementById("contactContent").className = " animated fadeOutLeft";
}
function projectsTransition()
{
document.getElementById("astronaut").className = " animated fadeOut";
document.getElementById("projectsContent").className = " animated fadeInUp";
document.getElementById("aboutContent").className = " animated fadeOutLeft";
document.getElementById("contactContent").className = " animated fadeOutLeft";
}
function contactTransition()
{
document.getElementById("astronaut").className = " animated fadeOut";
document.getElementById("contactContent").className = " animated fadeInUp";
document.getElementById("aboutContent").className = " animated fadeOutLeft";
document.getElementById("projectsContent").className = " animated fadeOutLeft";
}
//Menu
function expand(){
$(this).toggleClass("on");
$(".menu").toggleClass("active");
};
$(".button").on('click', expand);
body {
font-family: "Source Sans Pro", sans-serif;
color: #ccc;
z-index: -100;
background-color: black;
overflow: hidden;
}
#aboutContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: #2b2b41;
z-index: -1;
}
#projectsContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: #42424b;
z-index: -1;
}
#contactContent {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
background-color: #353440;
z-index: -1;
}
.menu {
position: fixed;
top: 0;
left: 0;
bottom: 0;
padding: 0;
overflow: hidden;
background: rgba(45, 51, 54, 0.9);
width: 18%;
box-sizing: border-box;
transition: all 250ms;
-webkit-transform: translateZ(0) translateX(-100%);
transform: translateZ(0) translateX(-100%);
text-align:center;
box-shadow: 0 0 20px #000000;
}
.active {
transform: translateZ(0) translateX(0);
transform: translateZ(0) translateX(0);
-webkit-transition: 0.4s;
transition: 0.4s;
color: #e5e5e5;
}
h1 {
margin-top:60%;
font-size: 2.5em;
cursor: default;
}
ul {
padding:0;
list-style:none;
font-size:14px;
}
li {
padding:10px 10px;
}
a {
text-decoration:none;
padding:10px 15px;
color:#fff;
font-family:"Roboto";
font-size: 1.5em;
font-weight: 300;
}
a:hover {
text-decoration: line-through;
color: #0dffec;
}
.content {
position:relative;
width:300px;
}
.button {
width:20px;
height:40px;
margin:24% 36%;
padding: 14px;
cursor:pointer;
}
.line {
width: 40px;
height: 2px;
background-color: #fff;
transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}
.line.first {
transform: translateX(-10px) translateY(22px) rotate(-90deg);
}
.line.second {
transform: translateX(-10px) translateY(19px) rotate(0deg);
}
.button.on .line.top {
transform: translateX(-10px) translateY(20px) rotate(45deg);
}
.button.on .line.bottom {
transform: translateX(-10px) translateY(17px)rotate(-45deg);
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Play|Raleway" rel="stylesheet">
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
</head>
<body>
<div id="wrapper">
<div class="menu">
<h1>Title</h1>
<ul>
<div id="home" onclick="homeTransition()"><li><i class="fa fa-home"></i> home</li></div>
<div id="about" onclick="aboutTransition()"><li><i class="fa fa-user"></i> about</li></div>
<div id="projects" onclick="projectsTransition()"><li><i class="fa fa-code"></i> projects</li></div>
<div id="contact" onclick="contactTransition()"><li><i class="fa fa-paper-plane"></i> contact</li></div>
</ul>
</div>
<div class="content">
<div class="button">
<div class="line first top"></div>
<div class="line second bottom"></div>
</div>
</div>
<div id="aboutContent">
</div>
<div id="projectsContent">
</div>
<div id="contactContent">
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/background.js"></script>
</body>
</html>
You can check like this
document.getElementById("projectsContent").className.indexOf("animated") !== -1 // class exists on element
But for this you can check for only one class, if you want to check for multiple classes store the className in a variable and check for all of them or write a utility function.
EDIT:
As mentioned by #Jerinaw in comment you can also use the below code, which is much shorter than above if you don't need support for < ie10
document.getElementById("projectsContent").classList.contains("animated") // class exists on element
Use vanilla Javascript
document.querySelector('#aboutContent.myclass');
This reads: Select the element with the id (id selector #) aboutContent, and that has the class (class selector .) myClass.
Read up on
CSS selectors
querySelector
I'd also like to note that you seem to be mixing vanilla javascript and jQuery. Maybe you should read up on selecting elements with jQuery.