Navigation between DIV's with triggers - javascript

I have three DIVs with the CSS "clip-path" attribute, which include low polygon shapes and text based titles.
I want to create divergent navigation (like a basic slider) between these DIVs and while titles are changing with a simple animation (fade-in and -out, etc.) shapes are transforming each other at same time.
Shapes will be static layers which change position when navigation is triggered. But titles are dynamically changing layers which are different for each DIV.
I had done this in a very simple way at first by assigning the "hover" state to the DIV, but since I do not know JS, I can only do this with "toggle", as you can see in the example.
But I want it to work with triggers like "click", "mousewheel" and the arrow keys.
Animations, transformations and other similar things about CSS are not a problem, I just have to learn how to create this navigation system between DIV's.
$('.toggle').click(function(e) {
e.preventDefault();
$('.container').toggleClass('moved');
})
.container {
background: #ccc;
margin: 2em auto;
width: 90%;
height: 0;
padding-top: 60%;
position: relative;
}
.poly {
background: rgba(255, 0, 0, 0.5);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: all .75s ease-in-out;
}
.poly:first-child {
clip-path: polygon(45% 25%, 40% 70%, 75% 30%);
}
.moved .poly:first-child {
clip-path: polygon(35% 50%, 55% 65%, 90% 45%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<button class="toggle">Move It</button>
<div class="container">
<div class="poly"></div>
</div>
Here is Jsfiddle file https://jsfiddle.net/Lsuw3L9z/

Related

How to make text a different color on overlap in HTML/CSS/JS

I'd like to make some animations with text and for the colours I'd like for the text colour to change depending on the background (the objects it overlaps). However, the effect I'm after doesn't work simply with opacity as I would like a different colour altogether.
For instance:
Note that I made this example using GIMP. Also note that the text wouldn't be always aligned/overlapping like this but only during an animation.
Is this effect relatively easy to do or would it require complex JavaScript code and libraries?
Here's an example of the sort of thing that can be done using mix-blend-mode.
This snippet just uses difference - you will have to try out different methods depending on the color combinations you want.
Using difference on the two bits of text and putting them on a white background and making the texts yellow to start with converts them to a sort of blue and then when the animated text hits the blueish background we get a lighter shade.
I'm afraid I've never found a simple, algorithmic way of deciding what values should be given to mix-blend-mode and always end up with experimenting.
.container {
width: 100vw;
height: 10em;
background-image: linear-gradient(-45deg, #5920d6 0 40%, transparent 40% 100%);
background-color: white;
overflow: hidden;
position: relative;
display: inline-block;
}
.container>* {
color: #5920d6;
color: yellow;
font-family: sans-serif;
font-size: 3em;
mix-blend-mode: difference;
}
.static {
position: absolute;
top: 40%;
display: inline-block;
color: yellow;
}
.move {
position: absolute;
animation: move 10s linear infinite;
top: calc(40% + 0.25em);
color: yellow;
}
#keyframes move {
0% {
transform: translate(0, -0.1em);
}
100% {
transform: translate(50vw, -0.1em);
}
}
<div class="container">
<div class="static">Some text</div>
<div class="move">Hello World</div>
</div>
You can read more about CSS animation on w3school web :
https://www.w3schools.com/css/css3_animations.asp

How to turn off hover effect after certain amount of time?

I have a hover effect where when the icon image is hovered over, an larger image appears (for clarity). I want this larger image effect to end after three seconds AND still have the hover ability. If the image is moved off of, then came back to; I want the larger image to load for another three seconds. Every time the image is hovered over, the effect would last three seconds.
I have tried CSS animations, transitions, setTimeout and none of them are working like I need. Any help is appreciated. I have a LOT of code on this project, so I will try to only include the relevant parts. Thanks in advance.
I will have the code added to the question, once i figure out what I am doing wrong.
Code for building levels for hover image
#PlayerMarker1 {
position: absolute;
left:2%;
top: 2%;
z-index: 9;
}
#Player1Final{
position: absolute;
left:2%;
top: 2%;
z-index: 9;
}
/* Elements for Image load on hover*/
.playerMarker img{
margin: 0 5px 5px 0;
}
.playerMarker:hover{
background-color: transparent;
}
.playerMarker:hover img{
border: 1px;
}
.playerMarker span{ /*CSS for enlarged image*/
position: absolute;
padding: 0px;
left: -1000px;
/*background-color: black ;*/
visibility: hidden;
color: black;
text-decoration: none;
}
.playerMarker span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.playerMarker:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 100px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
Code for defining the images.
<div id="Player1Test">
<a id="PlayerMarker1" href="#thumb1"><img src="Player Markers/Morty_Icon.png" width="auto" height="auto"/><span><img src="Player Images/Morty_Token.png" /><br /></span></a>
</div>
This script adds the playerMarker classes to the element I need.
/* Script to add class to player marker ID items */
function Player1Function() {
var Player1FinalTest = document.getElementById("PlayerMarker1");
Player1FinalTest.classList.add("playerMarker");
Player1FinalTest.id='Player1Final';
}
Seems like css animations to pulse the image would work fine. Run the code snippet to try.
img {
margin: 25px;
width: 100px;
height: auto;
}
img:hover {
animation: pulse 2s 1;
}
#keyframes pulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
50% {
transform: scale(1.4);
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
<h4>Hover the mouse over image<h4>
<img src="https://stackoverflow.design/assets/img/favicons/apple-touch-icon.png">
Yogi has a good answer using an animation that could be adapted to clearly move your element. I wanted to add an answer manipulating the left and top values using delay.
You are essentially moving a hidden image from off screen onto the screen. Though this feels a bit strange to do, as there may be more clear ways of accomplishing this task, you can immediately move the left into view, and delay moving the top out of view.
A different delay is needed for the hover and for the base element, so it returns to the original position immediately and is available for reuse, but delays moving away on hover.
This might keep in spirit of your current project.
If you have any questions, please ask 🚀
.playerMarker {
background-color: lightblue;
--size: 4rem;
height: var(--size);
width: var(--size);
}
.playerMarker span {
position: absolute;
padding: 0px;
top: 0;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
transition: top 0s;
}
.playerMarker span img {
border-width: 0;
padding: 2px;
}
.playerMarker:hover span {
transition: top 0s 2s;
visibility: visible;
top: -1000px;
left: 100px;
z-index: 50;
}
<div class="playerMarker">
<span>
<img src="https://stackoverflow.design/assets/img/favicons/apple-touch-icon.png" />
</span>
</div>

navbar transaprent to underlying background

I have a fixed navbar and the site's background changes with sections (the sections background is diagonal). Now I want the background color of the navbar to change with the background of the underlying section's background color, without just setting the navbar's background color to the same color but the navbar to be transparent to the background but not it's content, like this:
example of how it should like
and not like that:
example of how it should NOT look like
I'm super thankful for any idea or approach on how to achieve something!
If you want to keep the navbar on top all the time, change position to fixed and change set z-index to a high value so it is on top of all other elements, you may use the following CSS class for navbar. Of course, you can set the background-color and opacity to the values that match your background.
.myNavBar {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 1000;
}
Without sharing some codes on how you are achieving the undesired results it might be hard to help you out.
Try this and it would work, I guess.
Within the container for the navbar, set the z-index in the CSS to a very high number, say 1999. This would make sure the navbar remains on top of other elements, assuming no other element has been set to have a z-index greater than 1999, in this case.
.navbar-container {
z-index: 1999;
}
Fading Content using Iframes (No JavaScript)
You will need to create an Iframe tag with the src attribute set to the content file you want to fade. The main content has to have separate styles. The iframe must be in focus to allow scrolling. More details are in the code below.
Demo: https://fadingiframe.netlify.app/
/* Index.html style style-sheet below */
iframe {
position: absolute;
top: 5rem;
width: 100vw;
height: calc(100vh - 6rem);
border: none;
-webkit-mask-image: linear-gradient( /* Mask iframe */
transparent 1rem,
#fff 5%,
#fff 70%,
transparent 90%
);
mask-image: linear-gradient(
transparent 1rem,
#fff 5%,
#fff 70%,
transparent 90%
);
}
/* mainContent.html style style-sheet below */
body {
position: absolute;
overflow-x: hidden;
margin-top: 2rem;
color: aliceblue;
width: 80vw;
left: 5vw;
}
body::-webkit-scrollbar { /* Remove scroll bar */
display: none;
}
body {
-ms-overflow-style: none; /* keep in mind that it will only scroll if the iframe is in focus */
scrollbar-width: none;
}
p {
padding: 2rem;
font-size: 2rem;
}
<body>
<nav></nav>
<iframe id="main-content-iframe" src="mainContent.html"></iframe>
<!-- Add iframe and src to main content html file -->
<canvas id="canvas1"></canvas>
<footer></footer>
</body>
<!-- Separate html file in root directory -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./mainContent.css" /> <!-- Link to css file -->
</head>
<body>
<section>
<!-- Your Content here-->
</section>
</body>
</html>
-------------------------------------------------------------------------
For Text only -
Body Tag Has Special/Hide Properties
I think your issue is that you do not use the "body" element selector. It has unique properties that set the body element height to match the screen by default. Although it still allows scrolling the inner content. I add an extra background div for the text as well. It provides a better reading experience. Please have a look at my solution. It may help you solve your problem. If you have any questions, don't hesitate to ask.
Demo : https://jsfiddle.net/hexzero/5yjqk43a/
body {
background-image: black;
background-position: center center;
-webkit-background-size: cover;
background-size: cover;
background-attachment: fixed;
color: #fff;
}
section {
position: absolute;
padding: 3rem 25%;
background-image: Linear-gradient(
transparent 6rem, <-- Should be the same as nav Height
#fff 30%, <-- Can set this to nav Height for abrupt cut-off
#fff 70%,
transparent 90%
);
-webkit-background-clip: text;
background-clip: text;
background-attachment: fixed;
scroll-behavior: auto;
z-index: 3;
}
nav {
background: rgba(0, 0, 0, 0.616);
width: 100%;
position: fixed;
top: 0;
height: 6rem; <-- Navigation Height
z-index: 4;
}
section > p {
margin-top: 12rem;
color: transparent;
}
.text-background { <-- Remove this style section to have no background for the content,
width: 60%; <-- along side the <div class="text-background"></div> element
height: 100vh;
right: 20%;
position: fixed;
top: 0;
background-image: Linear-gradient(
transparent 6rem, <-- Background to nav height
rgba(102, 51, 153, 0.924) 20%,
rgba(102, 51, 153, 0.931) 90%,
transparent 100%
);
z-index: 0;
}
canvas {
width: 100%;
background-color: rebeccapurple;
position: fixed;
top: 0;
z-index: -1;
}
footer {
position: fixed;
width: 100%;
height: 1rem;
background: rebeccapurple;
z-index: 1;
bottom: 0;
}
p {
font-size: 2rem;
}
Let me know if you would be interested in a JavaScript version for better browsers support. Thanks

How to change value of CSS pseudoelement property using JavaScript in scrollspy?

I'm looking for a relatively simple and standard way of changing CSS pseudoelement property value by JS Scrollspy.
The parent element (section of a landpage) should change grayscale, while scrolled, and its child should have position:fixed.
As it turns out, it's impossible to make it in an easy way, because any filter is removing position:fixed by definition. More about this: CSS-Filter on parent breaks child positioning
Moving that background-image to a pseudoelement creates another problem: manipulation of the pseudoelement's properties by JS.
The expected result: I wanted to make a section of a landing page, having grayscale filter for background image. That's the easy part. But it should has less grayscale, while moving upward (the more picture user see, the more color it has), and centered content element shuffles up from previous section, and later hiding under next one.
So basically I need two things:
filter grayscaled background image, with dynamically changing value of a grayscale, relative to distance to the top of the window (JS scrollspy)
position:fixed central content element visible only in that section
Illustration (with background-picture in pseudoelement) is here: https://codepen.io/tdudkowski/pen/MLyMyG
HTML
<section class="one">
</section>
<section class="two">
<div><p>DIV with a position:fixed</p></div>
</section>
<section class="three"></section>
CSS
section {
position: relative;
max-width: 1000px;
height: 70vh;
background-color: #eee;
margin: 0 auto;
overflow: hidden;
}
.two {
background-color: transparent;
/* Try to uncomment rule below */
/* filter: grayscale(50%); */
}
.two div {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 30rem;
height: 10rem;
background-color: #f00;
z-index: 1;
}
.one,
.three {
z-index: 100;
}
/* background of section */
section.two::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-image: url(https://picsum.photos/1000/200);
background-size: cover;
background-repeat: no-repeat;
z-index: -1;
/* filter: grayscale(50%); */
}

How do I style a circular vertically-loading progress bar?

I'm making a very unique progress bar that visually looks like a glass orb filling up with liquid. Unfortunately, because of the rounded shape, the traditional method of modifying the height doesn't work so well (as demonstrated with this fiddle https://jsfiddle.net/usuwvaq5/2/).
As you can see, having the div height "slide up" is not the desired visual. I have also tried playing a bit with css clip, but was unable to get it to work for me. How can I create the visual effect of the glass "filling" with the second image?
Simply add background-position:bottom; to #inner-progress:
#inner-progress {
background-image: url(https://www.novilar.com/img/battle/ui/purification_meter_bar.png);
background-color: transparent;
background-position:bottom;
width: 100%;
overflow: hidden;
position: absolute;
bottom: 0;
height: 0%;
}
JSFiddle Demo
Jacob Gray probably has the best answer, but here's an alternative:
Fiddle
This approach uses css for the animation, instead of javascript. JS is only used here to trigger the animation, the rest is css.
This uses the css transition property to "animate" the height as it changes from 100% to 0%. The only notable change in the html is that I swapped the background of the inner with the outer.
Perhaps this answer will be a better solution to a future reader of this thread - depending on their implementation and/or preferences.
$(document).ready(function() {
$('#inner-progress').addClass("load");
});
#outer-progress {
background-image: url(https://www.novilar.com/img/battle/ui/purification_meter_bar.png);
background-color: transparent;
border: 0;
height: 100px;
width: 100px;
position: relative;
}
#inner-progress {
background-image: url(https://www.novilar.com/img/battle/ui/purification_meter_background.png);
background-color: transparent;
width: 100%;
overflow: hidden;
position: relative;
bottom: 0;
height: 100%;
transition: height 3s;
-webkit-transition: height 3s;
}
.progress-value {
color: #FFF !important;
font-weight: bold;
position: absolute;
top: 40%;
left: 40%;
}
.load{
height: 0% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="outer-progress">
<div id="inner-progress" value="0" max="100"></div>
<span class="progress-value">0%</span>
</div>

Categories