How can I make a label that has the name of the section "expand" from an SVG in a navbar when hovering with the cursor. To make things more clear:
here's a sketch of the wanted effect
/*this class is inside the <polyline> tag*/
.hover {
opacity: 0.5 !important;
}
.hover:hover {
opacity: 1 !important;
}
svg {
width: 50%;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="jquery.scrollTo.js" type="text/javascript"></script>
<script src="jquery.localScroll-1.4.0/jquery.localScroll.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="container">
<div id="firstPage">
<div id="navbar">
<!--these are the SVGs wrapped into an <a> tag-->
<a href="#firstPage" id="a">
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Livello_1" x="0px" y="0px" viewBox="0 0 118.7 103.3" xml:space="preserve" enable-background="new 0 0 118.7 103.3">
<style type="text/css">
.st0 {
fill: #FF3333;
}
</style>
<polyline class="st0 hover" points="59.3 34.4 59.5 34.4 0.3 0 0.3 68.4 0.2 68.4 59.4 103.4 59.4 103.4 118.5 68.4 118.3 68.4 118.3 0 59.2 34.4 " />
</svg>
</a>
</div>
</div>
</div>
This is my code
Any help would be great!
You can achieve this with CSS transitions. See my code:
CSS:
#container{
width:180px;
margin:0 auto;
text-align:center;
}
svg {
width: 50%;
}
a{
text-decoration:none;
}
label{
position:relative;
left:-70px;
top:-30px;
color:#fff;
text-transform:uppercase;
background:red;
transition: all 1s ease;
z-index:-1;
}
svg:hover ~ label{
left: -200px;
transition: all 1s ease;
}
As an addition, make sure you add the -webkit-, -moz-, and -o- prefixes to the transitions to make sure it is crossbrowser.
See the DEMO for your solution
Related
#myElement {
width: 50px;
height: 300px;
background: linear-gradient(0deg, #4a94cd, #fe49a6);
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
#myBar {
width: 100%;
height: 10px;
background: #000;
}
<div id="myElement">
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
<div id="myBar"></div>
</div>
How can I make the black part transparent to show the background behind，The background won't always be white，maybe a picture，The color part is a gradient of the whole
Change the id attribute to class for the div myBar and change the background to white.
We can target each of myBar elements using nth-child selector
.myBar:nth-child(1),.myBar:nth-child(2) and so on. I have added a sample below.
We can also use images as background by adding background-image property to the css definition.
#myElement {
width: 50px;
height: 300px;
background: linear-gradient(0deg, #4a94cd, #fe49a6);
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.myBar {
width: 100%;
height: 10px;
background: white;
}
.myBar:nth-child(1){
background:red;
}
----------
<div id="myElement">
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
<div class="myBar"></div>
</div>
I remember seeing in another post of yours that you want to make a progress bar (you should mention these things to make it easier for others to answer with relevant answers). And you probably want to change the height dynamically or something with this one div (to simulate the progress).
You can use the css property clip-path to achieve the effect of alternating between your gradient and a transparent background:
.container {
background: url(https://picsum.photos/id/999/360);
padding: 20px;
width: 320px;
}
#myElement {
width: 50px;
height: 320px;
background: linear-gradient(0deg, #4a94cd, #fe49a6);
clip-path: polygon(
0 0,100% 0,100% 20px,0 20px,
0 30px,100% 30px,100% 50px,0 50px,
0 60px,100% 60px,100% 80px,0 80px,
0 90px,100% 90px,100% 110px,0 110px,
0 120px,100% 120px,100% 140px,0 140px,
0 150px,100% 150px,100% 170px,0 170px,
0 180px,100% 180px,100% 200px,0 200px,
0 210px,100% 210px,100% 230px,0 230px,
0 240px,100% 240px,100% 260px,0 260px,
0 270px,100% 270px,100% 290px,0 290px,
0 300px,100% 300px,100% 320px,0 320px
);
}
<!--
I just added the container to show a background image behind
the element with the clip-path
-->
<div class="container">
<div id="myElement"></div>
</div>
You can create it easily using svg masking technique because using divs will not work
As you will see on running the snippet that the image is behind the svg but looks very clear as the black part is now transparent.
#myElement {
width: 50px;
height: 300px;
position: relative;
}
img{
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<svg width="50" height="300" id="myElement">
<defs>
<linearGradient xl=0 x2=0 y1=0 y2=1 id="Gradient">
<stop stop-color="#fe49a6" offset="0%" />
<stop stop-color="#4a94cd" offset="100%" />
</linearGradient>
<pattern id="pattern" x="0" y="0" width="50" height="30" patternUnits="userSpaceOnUse">
<rect x=0 y=0 width=50 height=20 fill="#999" />
</pattern>
<mask id="mask-gradient" x="0" y="0" width="50" height="300">
<rect x="0" y="0" width="50" height="300" fill="url(#pattern)" />
</mask>
</defs>
<rect id="rect1" fill=url(#Gradient) x="0" y="0" width="50" height="300" mask="url(#mask-gradient)" />
</svg>
</div>
<img src="https://images.unsplash.com/photo-1667400104714-53da4894bf18?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
</body>
</html>
This is a job for mask
#myElement {
width: 50px;
height: 300px;
background: linear-gradient(0deg, #4a94cd, #fe49a6);
-webkit-mask: linear-gradient(0deg,#0000 10px, #000 0) 0 0/100% 10%;
}
body {
background: orange;
}
<div id="myElement">
</div>
I'm using the latest version of these:
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js"
integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"
crossorigin="anonymous"></script>
This is the CSS I am using to achieve the desired CSS animation effects across literally all browsers except Safari.
.tt-divider {
border-style: outset;
border-color: LawnGreen;
border-radius: 3px;
margin-bottom: 2.5vh;
margin-top: 2.5vh;
background: gold;
border-width: 2px;
animation: grow-divider 2s forwards linear;
margin: auto;
}
#-webkit-keyframes grow-divider{
from {width:0%; }
to {width:100%; }
}
#keyframes grow-divider{
from {width:0%; }
to {width:100%; }
}
#landing-logo {
display: inline-block;
max-width: 350px;
min-width: 150px;
width: 50vw;
margin-top: 5vh;
margin-bottom: 1vh;
}
#navigation{
padding-left: 7.5vh;
padding-right: 7.5vh;
text-align:center;
}
#btm-right-nav{
max-width: 55px;
position: fixed;
right: 25px;
bottom: 10px;
}
.btm-right-ico {
display: block;
color: lawngreen;
margin:auto;
margin-bottom: 5vh;
font-size: 16px;
text-rendering: optimizeLegibility;
}
.fontawesome-i2svg-active .btm-right-ico {
animation-name: grow-buttons;
animation-duration: 2s;
animation-timing-function: linear;
animation-play-state: running;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-direction: normal;
}
#-webkit-keyframes grow-buttons{
from {font-size:16px; }
to {font-size: 45px; }
}
#keyframes grow-buttons{
from {font-size:16px}
to {font-size:45px;}
}
The grow-divider animation works perfectly, and another irrelevant one works perfectly as well on a different page. The only one I cannot get to work only on Safari is the grow-buttons animation. Yes Safari in general I've back-tested every version made in the past 5 years it does exactly the same thing..
Initially I thought it was a CSS naming problem... no I've tried multiple implementations of CSS for compatibility to no avail. I then thought it was just Safari, it could be, but why are my other CSS animations working then? I even put my CSS on the newly generated element via JS and it doesn't work. I even used async programming in JQuery to make sure the CSS wasn't applied before the <i> was changed to <svg>
It's worth mentioning that the CSS classes on the original <i> element are injected into the new <svg> from font-awesome... so the CSS animation is inherited.. this logic works on all browsers except Safari...
I have absolutely no idea what is causing it, anyway here's the html for the entire page:
<!--Display none is changed to block when the page is done loading-->
<div id="landing" style="display:none">
<div id="navigation">
<img id="landing-logo" src="example.gif" alt="example">
<div class="tt-divider"></div>
<div id="page">
</div>
<div id="btm-right-nav">
<i class="fas fa-bars btm-right-ico" data-fa-mask="fas fa-circle" data-fa-
transform="shrink-7"></i>
<i class="fas fa-phone btm-right-ico" data-fa-mask="fas fa-circle" data-fa-
transform="shrink-7"></i>
</div>
</div>
</div>
I think I could get it to work if I just yanked my own svg and put it neatly in an <img> and didn't do some masking magic on my buttons.. I don't want to do that because that'll cut off a ton of features of fontawesome and take more time... so in the meantime I have the animation turned off for Safari users and it's sad because I want this animation it's incredibly satisfying and I really don't want to have to bake my own masked SVGs and put them in a <img> just so I can run CSS animations over SVGs... I mean.. is that what I have to do?
Can I inject inline SVG into a src?
Here's the baked SVG data from fontawesome after the page loads (I took out the data:)
<div id="btm-right-nav">
<svg class="svg-inline--fa fa-bars fa-w-16 btm-right-ico" data-
fa-mask="fas fa-circle" data-fa-transform="shrink-7" aria-
hidden="true" focusable="false" data-prefix="fas" data-icon="bars"
role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
data-fa-i2svg=""><defs><clipPath id="clip-hzzHNtGIZRrn"><path
fill="currentColor" d=""></path></clipPath><mask x="0" y="0"
width="100%" height="100%" id="mask-jyjnVEKbKq5c"
maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"><rect
x="0"
y="0" width="100%" height="100%" fill="white"></rect><g
transform="translate(256 256)"><g transform="translate(0, 0)
scale(0.5625, 0.5625) rotate(0 0 0)"><path fill="black" d=""
transform="translate(-224 -256)"></path></g></g></mask></defs><rect
fill="currentColor" clip-path="url(#clip-hzzHNtGIZRrn)"
mask="url(#mask-
jyjnVEKbKq5c)" x="0" y="0" width="100%" height="100%"></rect></svg>
<!--<i class="fas fa-bars btm-right-ico" data-fa-mask="fas fa-
circle"
data-
fa-transform="shrink-7"></i> Font Awesome fontawesome.com -->
<svg class="svg-inline--fa fa-phone fa-w-16 btm-right-ico" data-
fa-mask="fas fa-circle" data-fa-transform="shrink-7" aria-hidden="true"
focusable="false" data-prefix="fas" data-icon="phone" role="img"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-
i2svg=""><defs><clipPath id="clip-YDDPIJZX3DpE"><path
fill="currentColor" d=""></path></clipPath><mask x="0" y="0"
width="100%" height="100%" id="mask-eJs29EAdXlZv"
maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"><rect
x="0" y="0" width="100%" height="100%" fill="white"></rect><g
transform="translate(256 256)"><g transform="translate(0, 0)
scale(0.5625, 0.5625) rotate(0 0 0)"><path fill="black" d=""
transform="translate(-256 -256)"></path></g></g></mask></defs><rect
fill="currentColor" clip-path="url(#clip-YDDPIJZX3DpE)"
mask="url(#mask-
eJs29EAdXlZv)" x="0" y="0" width="100%" height="100%">
</rect></svg>
<!--<i class="fas fa-phone btm-right-ico" data-fa-
mask="fas
fa-circle" data-fa-transform="shrink-7"></i> Font Awesome
fontawesome.com-->
</div>
Wow..... really hope this helps someone...
To fix the problem you use regular old css to transform scale it in the animation.
Font-size can be used to scale up inline SVGs on all browsers except Safari
#-webkit-keyframes grow-buttons{
from { -webkit-transform: scale(1); transform: scale(1);}
to { -webkit-transform: scale(3); transform: scale(3);}
}
#keyframes grow-buttons{
from { -webkit-transform: scale(1); transform: scale(1);}
to { -webkit-transform: scale(3); transform: scale(3);}
}
Bottom line:
Use transform: scale() instead of font-size: ()px on SVG CSS animations to maximize compatibility.
I want to add fading effect function when it toggles css stlye attributes and adds classList .
JS:
function darkMode(){
document.body.classList.toggle("dark-theme");
}
function dropDown(){
var options = document.getElementById("options")
options.style.display == "block" ? options.style.display = "none" :
options.style.display = "block";
options.classList.toggle("active")
}
css:
#options{
display: none;
opacity: 0;
position: absolute;
width: 250px;
height: auto;
background: var(--main-bg-color);
border-radius: 5px;
top: 80px;
font-size: 17.5px;
padding: 10px;
box-shadow: 0 4px 9.5px 0 rgba(0, 0, 0, 0.2),0 2px 4px 0 rgba(0, 0, 0, 0.1),inset 0 0 0 1px rgba(255, 255, 255, 0.5);
transition: ease-in-out .125s;
}
#options.active{
top: 65px;
opacity: 1;
transition: ease-in-out .25s;
}
html:
<div class="profile-top" onclick="dropDown()">
<div class="header-nav">
<p class="top-profile-name">
name
</p>
<img class="profile-image" src="..\img\img.png\">
<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="dropdown-icon" data-v-49c8d0d2="">
<path d="M1 1L5 5L9 1" stroke="white" data-v-49c8d0d2=""></path>
</svg>
</div>
<div class="top-profile-menu" id="options">
<div class="setting-buttons">
<img class="setting-icons" src="..\img\settings.svg\">
<a class="profile-parameters">
settings
</a>
</div>
<div class="setting-buttons" onclick="darkMode()">
<img class="setting-icons" src="..\img\moon.svg\">
<a class="profile-parameters">
dark design
</a>
</div>
<div class="setting-buttons">
<img class="setting-icons" src="..\img\logout.svg\">
<a class="profile-parameters">
logout
</a>
</div>
</div>
</div>
here is full html css and js code at jsfiddle
I have a div element, when you click it, the funcion(darkMode) toggles on, and changes css attribute display: none; to display: block; and addsClassLists, i've added transition attribute in css,but when displays change, transitions doesn't work. I want to make transition work, or somehow add js fade effect, without using jquery.
Add visability: hidden; and visability: visible; in second class
I've been working on a code and for some reason when you hover over the rain and beach icon there's a blue square border that I don't recall adding, how do I remove it? It also pops up when I hover over the other buttons.
I will appreciate anyone's help. Btw I'm following a tutorial from devEd
THANKS, Love2Code
<!DOCTYPE html>
<html>
<head>
<title>Meditation App</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.app{
height:100vh;
display:flex;
justify-content:space-evenly;
align-items:center;
}
.time-select,.sound-picker,.player-container{
height:80%;
flex:1;
display:flex;
flex-direction:column;
justify-content:space-evenly;
align-items:center;
}
.player-container{
position:relative;
}
.player-container svg{
position:absolute;
height:50%;
top:50%;
left:50%;
transform:translate(-50%,-50%);
pointer-events:none;
}
.time-display{
position:absolute;
bottom:10%;
color:white;
font-size:50px;
}
video{
position:fixed;
top:0%;
left:0%;
width:100%;
z-index:-10;
}
.time-select button,
.sound-picker button{
color:white;
width:30%;
height:10%;
background:none;
border:2px solid white;
cursor:pointer;
border-radius:5px;
font-size:20px;
transition:all 0.5s ease;
}
.time-select button:hover{
color:black;
background:white;
}
.sound-picker button{
border:none;
height:120px;
width:120px;
border-radius:50%;
}
.sound-picker button:nth-child(1){
background:#4972a1;
}
.sound-picker button:nth-child(2){
background:#a14f49;
}
</style>
</head>
<body>
<div class="app">
<div class="vid-container">
<video Loop>
<source src="https://www.dropbox.com/s/wkdu9elom9o4r5g/rain%20%281%29.mp4?raw=1"/>
</video>
</div>
<div class="time-select">
<button data-time="120">2 Minutes</button>
<button data-time="300">5 Minutes</button>
<button data-time="600">10 Minutes</button>
</div>
<div class="player-container">
<audio class="song">
<source src="https://www.dropbox.com/s/jawlfpyyz83w2td/rain.mp3?raw=1"></source>
</audio>
<svg class="play"
width="90" height="90" viewBox="0 0 68 78" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M68 39L0.499996 77.9711L0.5 0.0288552L68 39Z" fill="white"/>
</svg>
<svg class="track-outline"
width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="226.5" cy="226.5" r="216.5" stroke="white" stroke-width="20"/>
</svg>
<svg class="moving-outline"
width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="226.5" cy="226.5" r="216.5" stroke="#018EBA" stroke-width="20"/>
</svg>
<h3 class="time-display">0:00</h3>
</div>
<div class="sound-picker">
<button data-sound="https://www.dropbox.com/s/jawlfpyyz83w2td/rain.mp3?raw=1" data-video="https://www.dropbox.com/s/wkdu9elom9o4r5g/rain%20%281%29.mp4?raw=1"><img src="https://i.ibb.co/8BspYTV/rain-1.png"></button>
<button data-sound="https://www.dropbox.com/s/6k9nauf2ffyvfuu/beach.mp3?raw=1"
data-video="https://www.dropbox.com/s/tsdd86bxmax32jp/beach.mp4?raw=1"><img src="https://i.ibb.co/T0xw4k7/sun-umbrella.png"></button>
</div>
</body>
<script>
const app = () => {
const song = document.querySelector(".song");
const play = document.querySelector(".player-container");
const outline = document.querySelector(".moving-outline circle");
const video = document.querySelector(".vid-container video");
//Sounds
const sounds = document.querySelectorAll(".sound-picker button");
//Time Display
const timeDisplay = document.querySelector(".time-display");
//Get length of the outside
const outlineLength = outline.getTotalLength();
//Duration
let fakeDuration = 600;
outline.style.strokeDasharray = outlineLength;
outline.style.strokeDashoffset = outlineLength;
//play sounds
play.addEventListener("click", () => {
song.play();
});
};
app();
</script>
</html>
Use border: none!important, this forces the browser to use this code.
I've inspected your code and when i click, there is indeed an outline but if you select your button, add the :active and then set outline to none, it works for me.
.sound-picker:focus{
outline: none;
}
It might even work with just
.sound-picker{
outline: none;
}
but I haven't tested that one out
In your css, add this to the visited, focus, hover and active psuedoclasses:
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
If you want to remove elements borders when them get focused, you can do this:
* {
border: none !important;
outline: none !important
}
Tell me this resolves your problem or not.
<!DOCTYPE html>
<html>
<head>
<title>Meditation App</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
* {
outline: none !important;
border: none !important;
}
.app{
height:100vh;
display:flex;
justify-content:space-evenly;
align-items:center;
}
.time-select,.sound-picker,.player-container{
height:80%;
flex:1;
display:flex;
flex-direction:column;
justify-content:space-evenly;
align-items:center;
}
.player-container{
position:relative;
}
.player-container svg{
position:absolute;
height:50%;
top:50%;
left:50%;
transform:translate(-50%,-50%);
pointer-events:none;
}
.time-display{
position:absolute;
bottom:10%;
color:white;
font-size:50px;
}
video{
position:fixed;
top:0%;
left:0%;
width:100%;
z-index:-10;
}
.time-select button,
.sound-picker button{
color:white;
width:30%;
height:10%;
background:none;
border:2px solid white;
cursor:pointer;
border-radius:5px;
font-size:20px;
transition:all 0.5s ease;
}
.time-select button:hover{
color:black;
background:white;
}
.sound-picker button{
border:none;
height:120px;
width:120px;
border-radius:50%;
}
.sound-picker button:nth-child(1){
background:#4972a1;
}
.sound-picker button:nth-child(2){
background:#a14f49;
}
</style>
</head>
<body>
<div class="app">
<div class="vid-container">
<video Loop>
<source src="https://www.dropbox.com/s/wkdu9elom9o4r5g/rain%20%281%29.mp4?raw=1"/>
</video>
</div>
<div class="time-select">
<button data-time="120">2 Minutes</button>
<button data-time="300">5 Minutes</button>
<button data-time="600">10 Minutes</button>
</div>
<div class="player-container">
<audio class="song">
<source src="https://www.dropbox.com/s/jawlfpyyz83w2td/rain.mp3?raw=1"></source>
</audio>
<svg class="play"
width="90" height="90" viewBox="0 0 68 78" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M68 39L0.499996 77.9711L0.5 0.0288552L68 39Z" fill="white"/>
</svg>
<svg class="track-outline"
width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="226.5" cy="226.5" r="216.5" stroke="white" stroke-width="20"/>
</svg>
<svg class="moving-outline"
width="453" height="453" viewBox="0 0 453 453" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="226.5" cy="226.5" r="216.5" stroke="#018EBA" stroke-width="20"/>
</svg>
<h3 class="time-display">0:00</h3>
</div>
<div class="sound-picker">
<button data-sound="https://www.dropbox.com/s/jawlfpyyz83w2td/rain.mp3?raw=1" data-video="https://www.dropbox.com/s/wkdu9elom9o4r5g/rain%20%281%29.mp4?raw=1"><img src="https://i.ibb.co/8BspYTV/rain-1.png"></button>
<button data-sound="https://www.dropbox.com/s/6k9nauf2ffyvfuu/beach.mp3?raw=1"
data-video="https://www.dropbox.com/s/tsdd86bxmax32jp/beach.mp4?raw=1"><img src="https://i.ibb.co/T0xw4k7/sun-umbrella.png"></button>
</div>
</body>
<script>
const app = () => {
const song = document.querySelector(".song");
const play = document.querySelector(".player-container");
const outline = document.querySelector(".moving-outline circle");
const video = document.querySelector(".vid-container video");
//Sounds
const sounds = document.querySelectorAll(".sound-picker button");
//Time Display
const timeDisplay = document.querySelector(".time-display");
//Get length of the outside
const outlineLength = outline.getTotalLength();
//Duration
let fakeDuration = 600;
outline.style.strokeDasharray = outlineLength;
outline.style.strokeDashoffset = outlineLength;
//play sounds
play.addEventListener("click", () => {
song.play();
});
};
app();
</script>
</html>
I doesn’t know how to do the following with jQuery.
I have created a page hero with two sections (red/black):
What I want is, when hovering over the black one for example, it will expand over the red section, so you get a full black box. The same result I want of course for the red section:
How should I make this work?
var redSection = $('#red');
var blackSection = $('#black');
redSection.on('mouseover', function() {
// Do something - overlay the other section
});
The HTML markup is as follow:
<section id="hero">
<figure id="urbandesign">
<a href=“#" target="_blank">
<img src="images/urbandesign.jpg" alt="Urban Design">
</a>
</figure><!-- End figure -->
<figure id="photography">
<a href=“#" target="_blank">
<img src="images/photography.jpg" alt="Photography">
</a>
</figure><!-- End figure -->
</section><!-- End section#hero -->
And the CSS:
#hero {
height: 480px; /* Default 500px */
padding: 0;
position: relative;
overflow: hidden;
z-index: 1;
background: url(../images/hero.jpg) no-repeat center; /* remove */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#hero figure {
position: absolute;
top: 0;
background: #FFF;
}
#hero img {
width: 100%;
max-width: none;
position: relative;
opacity: 0.4;
}
The final result I want to replace the red and black section with images.
Look out to your response! Thank you.
A mix of CSS3 and jQuery with Graceful Degradation should sort this.
CSS
.page {
position:fixed;
width:100%;
height:100%;
overflow:hidden;
}
.black {
background:#000;
width:50%;
height:100%;
position:absolute;
width:100%;
left:-50%;
transform:skew(30deg,0);
transition:0.5s ease-in-out;
z-index:1;
}
.red {
background:#ff0000;
width:50%;
height:100%;
position:absolute;
width:100%;
right:-50%;
transform:skew(30deg,0);
transition:0.5s ease-in-out;
}
.red:hover {
transform:skew(0);
transform:translate(-50%,0);
}
.black:hover {
transform:skew(0);
transform:translate(50%,0);
}
.inactive {
z-index:-1
}
HTML
<div class="page">
<div class="black"></div>
<div class="red"></div>
</div>
jQuery
The jQuery is necessary to fix a z-index problem with the last element in the DOM tree that ruins the fluid animation.
$(document).ready(function(){
$('.black').hover(function(){
$('.red').addClass('inactive');
},function(){
$('.red').removeClass('inactive');
});
$('.red').hover(function(){
$('.black').addClass('inactive');
},function(){
$('.black').removeClass('inactive');
});
});
Be aware that adding any content to the two divs you will have to add an inner div and reset the skew with 'transform:skew(-30deg,0);'. The prefixed versions of transition and transform will also need adding.
JSFiddle Reference
You could do this using svg's path for the shape, pattern for the image and a little bit of JavaScript for handling the mouseover and mouseleave events.
var hero = document.getElementById('hero');
var animLeft = document.getElementById('anim-left');
var animRight = document.getElementById('anim-right');
hero.addEventListener('mouseover', function(e) {
(e.target.id == 'left') ? animRight.beginElement() : animLeft.beginElement();
})
hero.addEventListener('mouseleave', function(e) {
(e.target.id == 'left') ? animRight.endElement() : animLeft.endElement();
})
<svg id="hero" width="600" height="200" viewBox="0 0 600 200">
<defs>
<pattern id="image-left" patternUnits="userSpaceOnUse" width="600" height="200" viewBox="0 0 600 200">
<image xlink:href="http://dummyimage.com/600x200/40000c/000" width="600" height="200" />
</pattern>
<pattern id="image-right" patternUnits="userSpaceOnUse" width="600" height="200" viewBox="0 0 600 200">
<image xlink:href="http://dummyimage.com/600x200/002a33/fff" width="600" height="200" />
</pattern>
</defs>
<a xlink:href="#">
<path id="right" d="M0,0 h600 v200 h-600z" fill="url(#image-right)" />
</a>
<a xlink:href="#">
<path id="left" d="M0,0 h350 l-100,200 h-250z" fill="url(#image-left)" />
<animate id="anim-left" xlink:href="#left" attributeType="XML" attributeName="d" from="M0,0 h350 l-100,200 h-250z" to="M0,0 h0 l-100,200 h0z" dur="1" begin="indefinite" repeatCount="1" fill="freeze" />
<animate id="anim-right" xlink:href="#left" attributeType="XML" attributeName="d" from="M0,0 h350 l-100,200 h-250z" to="M0,0 h700 l-100,200 h-600z" dur="1" begin="indefinite" repeatCount="1" fill="freeze" />
</a>
</svg>
A simple CSS only solution with no additional re-paints, etc.:
.parent {
overflow: hidden;
position: absolute;
width: 90%;
height: 90%;
}
.item {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
transition: transform 1s, z-index 1s;
z-index: 1;
overflow: hidden;
}
.item .image {
transition: transform 1s;
}
.item:hover {
transform: translate3d(0px, 0px, 0px);
z-index: 100;
}
.item:hover .image {
transform: skewX(0deg);
}
.red {
background: #f00;
transform: translate3d(-50%, 0px, 0px) skewX(-10deg);
}
.red .image {
transform: skewX(10deg);
}
.black {
background: #000;
transform: translate3d(50%, 0px, 0px) skewX(-10deg);
}
.black img {
transform: skewX(10deg);
}
<section class="parent">
<div class="red item">
<img class="image" src="http://placehold.it/450/ff0000/000000" />
</div>
<div class="black item">
<img class="image" src="http://placehold.it/450/000000/ffffff" />
</div>
</section>