Keyframes animation in styled-components - javascript

I am trying to write keyframe, animation in my code but I can't figure it out even after reading the documentation. Please help
```const ButtonStyle = styled.div`
.btn_rainbow {
text-decoration: none;
background-color: #c53ab4;
border-radius: 5px;
color: #fff;
cursor: pointer;
padding: 8px 16px;
&:hover {
background-image: linear-gradient(90deg,
#00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 100%);
}
}
`;
export default function Button() {
return (
<ButtonStyle>
<a class="btn_rainbow" href="#">Click Me!</a>
</ButtonStyle>
);
}```
The CSS Keyframe I wanted to add:
```#keyframes slidebg {
to {
background-position:20vw;
}
}
.btn_rainbow:hover{
background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF
100%);
animation:slidebg 5s linear infinite;
}```

.glow-on-hover {
width: 220px;
height: 50px;
border: none;
outline: none;
color: #fff;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: '';
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
position: absolute;
top: -2px;
left:-2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #111;
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
<ButtonStyle>
<button class="glow-on-hover" href="#">Click Me!</button>
</ButtonStyle>

Related

Adding shine animation not working in special cases

I have this function to shine any text element which is passed to it.
The first example here works fine (the second example doesn't work, I provide this in case this can help us find out the issue):
function Shine(textElement) {
textElement.classList.remove("shine");
setTimeout(() => textElement.classList.add("shine"), 20);
textElement.addEventListener("webkitAnimationEnd", shineEnd);
function shineEnd(e) {
if (e.animationName === 'shine') {
//textElement.classList.remove("shine");
textElement.removeEventListener("webkitAnimationEnd", shineEnd);
}
}
}
setTimeout(() => {
const prepareCaption = document.querySelector(".prepareCaption");
Shine(prepareCaption);
}, 2500);
.prepare-container {
position: absolute;
overflow: hidden;
display: flex;
align-items: center;
margin: 0 auto;
left: 2.5%;
height: 20vh;
width: 95%;
z-index: 11;
top: 55vh;
padding-top: 10px;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.prepareCaption {
position: relative;
filter: drop-shadow(2px 2px 2px #100021) drop-shadow(1px .05em 1px #0d021a);
text-align: center;
width: 100%;
color: #f8f7fa;
margin: 0 auto;
opacity: 1;
top: 0vh;
transition: top 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.shine {
background-color: currentColor;
background-image: linear-gradient(-42deg, transparent 0%, transparent 40%, #fff 50%, transparent 60%, transparent 100%);
background-position: -100%, 0%;
background-repeat: no-repeat, repeat;
background-size: 60%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
animation: shine 4s ease-out 1 forwards;
}
#keyframes shine {
from { background-position: -100%, 0%; }
to { background-position: 200%, 0%; }
}
<div class="prepare-container">
<p class="prepareCaption" style="color: rgb(255, 0, 64); font-family: "Open Sans Semibold"; font-size: 28px;">This is shining</p>
</div>
I expect this function work in any satiation but unfortunately we have this second example in which the function acts wired and doesn't work as expected, here it is:
Note: the shine function is identical in both cases. the only difference is the element I pass to the function.
Here we want to shine the expandCaptionSpan id:
function Shine(textElement) {
textElement.classList.remove("shine");
setTimeout(() => textElement.classList.add("shine"), 20);
textElement.addEventListener("webkitAnimationEnd", shineEnd);
function shineEnd(e) {
if (e.animationName === 'shine') {
//textElement.classList.remove("shine");
textElement.removeEventListener("webkitAnimationEnd", shineEnd);
}
}
}
setTimeout(() => {
const expandCaption = document.querySelector("#expandCaptionSpan");
Shine(expandCaption);
}, 2500);
.expandCaption {
position: relative;
font-family: "Open Sans Semibold", sans-serif;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
text-align: center;
width: 100%;
font-size: 4vw;
color: #ff0000;
margin: 0 auto;
opacity: 1;
top: 0vh;
transition: top 0.3s ease-in-out, opacity 0.4s ease-in-out;
}
.arrow {
color: #ff9900;
font-size: 2vw;
}
.arrow-samll {
color: #ff4646;
font-size: 1.5vw;
}
.left-arrow {
padding-right: 7vw;
transition: 1s ease-in-out;
}
.right-arrow {
padding-left: 7vw;
}
.shine {
background-color: currentColor;
background-image: linear-gradient(-42deg, transparent 0%, transparent 40%, #fff 50%, transparent 60%, transparent 100%);
background-position: -100%, 0%;
background-repeat: no-repeat, repeat;
background-size: 60%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
animation: shine 4s ease-out 1 forwards;
}
#keyframes shine {
from { background-position: -100%, 0%; }
to { background-position: 200%, 0%; }
}
<div class="expand-caption-container">
<p class="expandCaption"><span class="left-arrow arrow-samll">‹</span>
<span id="expandCaptionSpan">Permafrost</span><span class="right-arrow arrow-samll">›</span></p>
</div>
How can I fix the second example? What am I missing?
It seems that your JS is the same but CSS not. I've found that text-shadow is causing the issue. Just replace it with filter as it's done in your first example and it works. It seems that the issue is caused by render system.
function Shine(textElement) {
textElement.classList.remove("shine");
setTimeout(() => textElement.classList.add("shine"), 20);
textElement.addEventListener("webkitAnimationEnd", shineEnd);
function shineEnd(e) {
if (e.animationName === 'shine') {
//textElement.classList.remove("shine");
textElement.removeEventListener("webkitAnimationEnd", shineEnd);
}
}
}
setTimeout(() => {
const expandCaption = document.querySelector("#expandCaptionSpan");
Shine(expandCaption);
}, 2500);
.expandCaption {
position: relative;
font-family: "Open Sans Semibold", sans-serif;
/*text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);*/
filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 1));
text-align: center;
width: 100%;
font-size: 4vw;
color: #ff0000;
margin: 0 auto;
opacity: 1;
top: 0vh;
transition: top 0.3s ease-in-out, opacity 0.4s ease-in-out;
}
.arrow {
color: #ff9900;
font-size: 2vw;
}
.arrow-samll {
color: #ff4646;
font-size: 1.5vw;
}
.left-arrow {
padding-right: 7vw;
transition: 1s ease-in-out;
}
.right-arrow {
padding-left: 7vw;
}
.shine {
background-color: currentColor;
background-image: linear-gradient(-42deg, transparent 0%, transparent 40%, #fff 50%, transparent 60%, transparent 100%);
background-position: -100%, 0%;
background-repeat: no-repeat, repeat;
background-size: 60%;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
animation: shine 4s ease-out 1 forwards;
}
#keyframes shine {
from { background-position: -100%, 0%; }
to { background-position: 200%, 0%; }
}
<div class="expand-caption-container">
<p class="expandCaption"><span class="left-arrow arrow-samll">‹</span>
<span id="expandCaptionSpan">Permafrost</span><span class="right-arrow arrow-samll">›</span></p>
</div>

how to finish animation effect after returning from new tab?

function navigation(id) {
switch (id) {
case 'btn4':
setTimeout(() => {
window.open("https://www.google.com/search?q=google+translate&oq=googl&aqs=chrome.0.69i59j69i57j35i39j0l5.3829j0j15&sourceid=chrome&ie=UTF-8", 'Dictionary')
}, 250);
break;
case 'btn5':
setTimeout(() => {
window.open("https://www.google.com/search?q=google+translate&oq=googl&aqs=chrome.0.69i59j69i57j35i39j0l5.3829j0j15&sourceid=chrome&ie=UTF-8", 'Dictionary')
}, 250);
break;
}
}
.defaultBtn {
margin-top: 23px
}
.defaultBtn input[type=checkbox] {
width: 0;
height: 0;
display: none;
visibility: hidden;
}
.defaultBtn label {
width: 240px;
height: 52px;
display: block;
cursor: pointer;
position: relative;
}
.defaultBtn label span {
top: 13px;
z-index: 2;
right: 57px;
color: #fff;
font-size: 20px;
font-weight: 600;
position: absolute;
text-transform: uppercase;
}
.defaultBtn label::before {
content: "";
width: 130px;
height: 52px;
margin-left: 12px;
display: block;
border-radius: 35px;
background-color: #122433;
background-size: 50px 110px;
background-position: 5px 0px;
background-repeat: no-repeat;
background-image: url(https://i.ibb.co/HpMQBCz/checkmark.png);
}
.defaultBtn label::after {
content: '';
top: 0;
right: 18px;
width: 157px;
height: 52px;
position: absolute;
border: 0.2rem solid #64ef65;
border-radius: 35px;
background: linear-gradient(to bottom, #53D853 0%, #0F860F 100%);
}
input[type="checkbox"]:checked+label::before {
animation-name: switchBgColorDefault;
animation-fill-mode: forwards;
animation-duration: 0.25s;
animation-timing-function: steps(1);
}
input[type="checkbox"]:checked+label::after,
input:checked+label span {
animation-name: switchColorDefault;
animation-duration: 0.25s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
#keyframes switchBgColorDefault {
0% {
background-position: 5px 0px;
}
100% {
background-position: 8px -55px;
background-color: #007236;
}
}
#keyframes switchColorDefault {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-70px);
}
100% {
transform: translateX(0);
}
}
<div class="defaultBtn" id="btn1" onclick="navigation(this.id);">
<input type="checkbox" id="defaultBtn">
<label for="defaultBtn"><span><strong>Access</strong></span>
</label>
</div>
i have button with some animation, when i clicked this button it animate and open website in new tab. but when i return from new tab to home page button remain in animated sate. i want animation is remove after returning from new tab.can someone plz help me to resolve this issue. i have button with some animation, when i clicked this button it animate and open website in new tab. but when i return from new tab to home page button remain in animated sate. i want animation is remove after returning from new tab.can someone plz help me to resolve this issue.
With simple trick : use <a> tag
onclick="setTimeout('animRedirect()', 250);" give in checkbox onclick
I add a tag before checkbox and add url
<a href="https://www.google.com/search?q=google+translate&oq=googl&aqs=chrome.0.69i59j69i57j35i39j0l5.3829j0j15&sourceid=chrome&ie=UTF-8" id="reDirect" target="_blank">
------------------Add here check box---------------------------
</a>
I fixed this problem in codepen : https://codepen.io/Rayeesac/pen/ExKKPZe
function animRedirect(){
document.getElementById("reDirect").click();
}
.defaultBtn {
margin-top: 23px
}
.defaultBtn input[type=checkbox] {
width: 0;
height: 0;
display: none;
visibility: hidden;
}
.defaultBtn label {
width: 240px;
height: 52px;
display: block;
cursor: pointer;
position: relative;
}
.defaultBtn label span {
top: 13px;
z-index: 2;
right: 57px;
color: #fff;
font-size: 20px;
font-weight: 600;
position: absolute;
text-transform: uppercase;
}
.defaultBtn label::before {
content: "";
width: 130px;
height: 52px;
margin-left: 12px;
display: block;
border-radius: 35px;
background-color:#122433;
background-size: 50px 110px;
background-position: 5px 0px;
background-repeat: no-repeat;
background-image: url(https://i.ibb.co/HpMQBCz/checkmark.png);
}
.defaultBtn label::after {
content: '';
top: 0;
right: 18px;
width: 157px;
height: 52px;
position: absolute;
border:0.2rem solid #64ef65;
border-radius: 35px;
background:linear-gradient(to bottom,#53D853 0%,#0F860F 100%);
}
input[type="checkbox"]:checked + label::before{
animation-name: switchBgColorDefault;
animation-fill-mode: forwards;
animation-duration: 0.25s;
animation-timing-function: steps(1);
}
input[type="checkbox"]:checked + label::after,
input:checked + label span{
animation-name: switchColorDefault;
animation-duration: 0.25s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
#reDirect{
outline: none;
width: 100%;
}
#keyframes switchBgColorDefault {
0% {
background-position: 5px 0px;
}
100% {
background-position: 8px -55px;
background-color: #007236;
}
}
#keyframes switchColorDefault {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-70px);
}
100% {
transform: translateX(0);
}
}
<div class="defaultBtn" id="btn1">
<a href="https://www.google.com/search?q=google+translate&oq=googl&aqs=chrome.0.69i59j69i57j35i39j0l5.3829j0j15&sourceid=chrome&ie=UTF-8" id="reDirect" target="_blank">
<input type="checkbox" id="defaultBtn" onclick="setTimeout('animRedirect()', 250)">
<label for="defaultBtn">
<span><strong>Access</strong></span>
</label>
</a>
</div>

Traffic light using css change by adding javascript to control the timer

**i found this code online which timer is controled in css.how do i control it with javascript.i have tried new ways but failed.anyone able to help me out.What im actually trying is to control the javascript function with button click,once the button is clicked then it should call the function to run the lights based on timer which i tried early using settimeout and by setinterval but i could make it.for example red 5 seconds,orange 3 seconds and green 10 seconds,onlick this function should run.
html {
background: linear-gradient(#08f, #fff);
padding: 40px;
width: 170px;
height: 100%;
margin: 0 auto;
}
.protector {
background: transparent;
width: 180px;
height: 0;
position: absolute;
top: 20px;
left: -35px;
border-right: solid 30px transparent;
border-left: solid 30px transparent;
border-top: solid 90px #111;
border-radius: 10px;
z-index: -1;
}
.protector:nth-child(2) {
top: 140px;
}
.protector:nth-child(3) {
top: 260px;
}
.trafficlight {
background: #222;
background-image: linear-gradient(transparent 2%, #111 2%, transparent 3%, #111 30%);
width: 170px;
height: 400px;
border-radius: 10px;
position: relative;
border: solid 5px #333;
}
.trafficlight:before {
background: #222;
background-image: radial-gradient(#444, #000);
content: "";
width: 170px;
height: 150px;
margin: 0 auto;
position: absolute;
top: -30px;
margin-left: 0px;
border-radius: 50%;
z-index: -1;
}
.trafficlight:after {
background: #222;
background-image: linear-gradient(-0deg, #444, #ccc 30%, #000);
content: "";
width: 75px;
height: 800px;
margin-left: 50px;
position: absolute;
top: 150px;
z-index: -1;
}
.red {
background: red;
background-image: radial-gradient(brown, transparent);
background-size: 5px 5px;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: 20px;
left: 35px;
animation: 15s red infinite;
box-shadow: 0 0 20px #111 inset, 0 0 10px red;
}
.yellow {
background: yellow;
background-image: radial-gradient(orange, transparent);
background-size: 5px 5px;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: 145px;
left: 35px;
animation: 13s yellow infinite;
box-shadow: 0 0 20px #111 inset, 0 0 10px yellow;
}
.green {
background: green;
background-image: radial-gradient(lime, transparent);
background-size: 5px 5px;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: 270px;
left: 35px;
box-shadow: 0 0 20px #111 inset, 0 0 10px lime;
animation: 13s green infinite;
}
#keyframes red {
0% {
opacity: 1;
}
20% {
opacity: 1;
}
40% {
opacity: 1;
}
60% {
opacity: .1;
}
80% {
opacity: .1;
}
100% {
opacity: .1;
}
}
#keyframes yellow {
0% {
opacity: .1;
}
20% {
opacity: .1;
}
40% {
opacity: 1;
}
50% {
opacity: .1;
}
60% {
opacity: .1;
}
80% {
opacity: .1;
}
100% {
opacity: .1;
}
}
#keyframes green {
0% {
opacity: .1;
}
20% {
opacity: .1;
}
40% {
opacity: .1;
}
60% {
opacity: 1;
}
80% {
opacity: 1;
}
85% {
opacity: .1;
}
90% {
opacity: 1;
}
95% {
opacity: .1;
}
100% {
opacity: 1;
}
}
<div class="trafficlight">
<div class="protector"></div>
<div class="protector"></div>
<div class="protector"></div>
<div class="red"></div>
<div class="yellow"></div>
<div class="green"></div>
</div>
**
$(".trafficlight").click(function(){
$(this).toggleClass("start")
})
html {
background: linear-gradient(#08f, #fff);
padding: 40px;
width: 170px;
height: 100%;
margin: 0 auto;
}
.protector {
background: transparent;
width: 180px;
height: 0;
position: absolute;
top: 20px;
left: -35px;
border-right: solid 30px transparent;
border-left: solid 30px transparent;
border-top: solid 90px #111;
border-radius: 10px;
z-index: -1;
}
.protector:nth-child(2) {
top: 140px;
}
.protector:nth-child(3) {
top: 260px;
}
.trafficlight {
background: #222;
background-image: linear-gradient(transparent 2%, #111 2%, transparent 3%, #111 30%);
width: 170px;
height: 400px;
border-radius: 10px;
position: relative;
border: solid 5px #333;
}
.trafficlight:before {
background: #222;
background-image: radial-gradient(#444, #000);
content: "";
width: 170px;
height: 150px;
margin: 0 auto;
position: absolute;
top: -30px;
margin-left: 0px;
border-radius: 50%;
z-index: -1;
}
.trafficlight:after {
background: #222;
background-image: linear-gradient(-0deg, #444, #ccc 30%, #000);
content: "";
width: 75px;
height: 800px;
margin-left: 50px;
position: absolute;
top: 150px;
z-index: -1;
}
.red {
background: red;
background-image: radial-gradient(brown, transparent);
background-size: 5px 5px;
width: 100px;
height: 100px;
border-radius: 50%;
opacity:0;
position: absolute;
top: 20px;
left: 35px;
box-shadow: 0 0 20px #111 inset, 0 0 10px red;
}
.start .red{
animation: 15s red infinite;
}
.start .yellow {
animation: 13s yellow infinite;
}
.start .green{
animation: 13s green infinite;
}
.yellow {
background: yellow;
background-image: radial-gradient(orange, transparent);
background-size: 5px 5px;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
opacity:0;
top: 145px;
left: 35px;
box-shadow: 0 0 20px #111 inset, 0 0 10px yellow;
}
.green {
background: green;
background-image: radial-gradient(lime, transparent);
background-size: 5px 5px;
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: 270px;
opacity:0;
left: 35px;
box-shadow: 0 0 20px #111 inset, 0 0 10px lime;
}
#keyframes red {
0% {
opacity: 1;
}
20% {
opacity: 1;
}
40% {
opacity: 1;
}
60% {
opacity: .1;
}
80% {
opacity: .1;
}
100% {
opacity: .1;
}
}
#keyframes yellow {
0% {
opacity: .1;
}
20% {
opacity: .1;
}
40% {
opacity: 1;
}
50% {
opacity: .1;
}
60% {
opacity: .1;
}
80% {
opacity: .1;
}
100% {
opacity: .1;
}
}
#keyframes green {
0% {
opacity: .1;
}
20% {
opacity: .1;
}
40% {
opacity: .1;
}
60% {
opacity: 1;
}
80% {
opacity: 1;
}
85% {
opacity: .1;
}
90% {
opacity: 1;
}
95% {
opacity: .1;
}
100% {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="trafficlight">
<div class="protector"></div>
<div class="protector"></div>
<div class="protector"></div>
<div class="red"></div>
<div class="yellow"></div>
<div class="green"></div>
</div>
i managed to make it work on click with jquery!

My webpage seems to work on certain platforms and not on others, the css doesn't get applied, why is this?

Here is a link to my webpage https://taniaswebpages.com/, specifically Website 5 - Snowfall that I am currently working on, the webpage only works for me on Safari on Iphone6s, and doesn't apply the css on Mac Chrome/Safari. But for others it works... why is it changing depending on the type of platform or user?
HTML/CSS:
body.mainpage2 {
margin: 0;
padding: 0;
font-family: lato;
background-color: #e74c3c;
}
.color {
margin-top: 350px;
text-align: center;
}
#hex {
display: block;
color: white;
font-size: 40px;
text-transform: uppercase;
margin: 15px;
letter-spacing: 0.1em;
}
.color button {
background: none;
outline: none;
color: white;
border: 2px solid white;
cursor: pointer;
font-size: 22px;
border-radius: 5px;
box-shadow: 5px 6px 30px 5px #fff;
width: 200px;
}
body.mainpage3 {
background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(221, 106, 95, 0.81));
margin: 0;
padding: 2em 2em 4em;
font-family: Lato;
font-size: 16.5px;
line-height: 24px;
float;
align-content: flex-start;
display: block;
}
input[type=button] {
width: 8%;
border: none;
padding: 8px 8px;
cursor: pointer;
color: palevioletred;
}
.image1 {
position: relative;
right: -400px;
bottom: 600px;
animation: shake 0.9s;
animation-iteration-count: infinite;
}
.image2 {
position: relative;
right: -100px;
bottom: 200px;
animation: shake 0.9s;
animation-iteration-count: infinite;
}
#keyframes shake {
0% {
transform: translate(1px, 1px) rotate(0deg);
}
10% {
transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
transform: translate(-3px, 0px) rotate(1deg);
}
30% {
transform: translate(3px, 2px) rotate(0deg);
}
40% {
transform: translate(1px, -1px) rotate(1deg);
}
50% {
transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
transform: translate(-3px, 1px) rotate(0deg);
}
70% {
transform: translate(3px, 1px) rotate(-1deg);
}
80% {
transform: translate(-1px, -1px) rotate(1deg);
}
90% {
transform: translate(1px, 2px) rotate(0deg);
}
100% {
transform: translate(1px, -2px) rotate(-1deg);
}
}
body.mainpage4 {
margin: 0;
padding: 0;
background-color: darkseagreen;
}
.container1 {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.container1 span {
text-transform: uppercase;
display: block;
}
.Words1 {
color: forestgreen;
font-family: monospace;
font-size: 60px;
font-weight: 700;
letter-spacing: 6px;
margin-bottom: 4px;
position: relative;
}
.Words2 {
color: red;
font-family: cursive;
font-size: 40px;
font-weight: 750;
letter-spacing: 2px;
animation: blinkingText 1s linear infinite;
}
#keyframes blinkingText {
0% {
color: #f00;
}
49% {
color: transparent;
}
50% {
color: transparent;
}
99% {
color: transparent;
}
100% {
color: #f00;
}
}
.image {
background-size: cover;
width: 100%;
height: 1000px;
position: relative;
overflow: hidden;
}
.snow1 {
background: url(https://taniaswebpages.com/snow.png);
background-repeat: repeat;
width: 100%;
height: 2000px;
position: absolute;
top: 0;
left: 0;
animation: snowfall 3s infinite linear;
}
.snow2 {
background: url(snow.png);
background-repeat: repeat;
width: 100%;
height: 2000px;
position: absolute;
top: 0;
left: 0;
animation: snowfall 8s infinite linear;
}
#keyframes snowfall {
0% {
background-position: 0px 0px
}
100% {
background-position: 100px 650px
}
}
#keyframes snowfallSecond {
0% {
background-position: 0px -100px
}
100% {
background-position: 0px 650px
}
}
<!DOCTYPE html>
<html>
<head>
<link href="taniaWebsite2.css" type=text/css rel=Stylesheet>
</head>
<body class="mainpage4">
<div class="container1">
<span class="Words1">Merry Christmas</span>
<span class="Words2"> and Happy Holidays!</span>
</div>
<div class="image">
<div class="snow1"></div>
<div class="snow2"></div>
</div>
</body>
</html>
Try changing
<link href="taniaWebsite2.css" type=text/css rel=Stylesheet>
to
<link href="taniaWebsite2.css" type="text/css" rel="stylesheet">
With quotes around the attribute values and all lowercase.

Gradiend transparency on input font when text extends over the input

I am facing a problem: I am creating some inputs with different states; one of this states is when the text of the input is longer that the input itself: in this case the text that is hidden at the left of the input should fade out with a gradient transparency:
My code for now is this:
.Input {
position: relative;
width: 100%;
border: none;
width: 200px;
}
.Input:before {
content: '';
position: absolute;
bottom: 0;
width: 100%;
transition: border-bottom 0.5s ease;
border-bottom: 1px solid gainsboro;
}
.Input input {
margin-top: 20px;
height: 40px;
width: 100%;
padding-left: 0;
font-size: 16px;
font-weight: 300;
background-color: transparent;
background-image: linear-gradient(to bottom, gainsboro 50%, tomato 50%);
background-repeat: no-repeat;
background-size: 0 11%;
background-position: 50% 100%;
transition: all 0.5s ease;
box-shadow: none;
}
.Input h1 {
font-size: 16px;
color: gainsboro;
font-weight: 400;
position: absolute;
pointer-events: none;
left: 0;
bottom: 0;
transition: 0.5s ease all;
width: 100%;
line-height: unset;
}
.Input:hover:before {
transition: border-bottom 0.5s ease;
border-bottom: 1px solid dimgray;
}
input:focus {
background-color: transparent;
background-image: linear-gradient(to bottom, transparent 50%, tomato 50%);
background-repeat: no-repeat;
background-size: 100% 11%;
background-position: 50% 100%;
transition: all 0.5s ease;
}
input:focus,
input:not(:focus):valid {
border: none;
outline: none;
}
input:focus ~ h1, input:not(:focus):valid ~ h1 {
color: tomato;
transition: all 0.5s ease;
transform: translateY(-25px);
}
<div class="Input">
<input type="text" class="Input" name="testInput" value="" data-id="" required>
<h1>
MyInput
</h1>
</div>
<br>
Any help will be welcome…
Thanks in advance!
The idea to check if the text reach a particular length, if yes you show a hidden element.
In the example below I simplified to the test but what you need to do is to calculate the width that the text should take and then compare with the input width. You can check this link for some idea
Calculating text width
$('.Input input').on('keypress change keyup', function() {
if ($(this).val().length > 10) {
$(this).parent().find('.grad').css('opacity', '1');
} else {
$(this).parent().find('.grad').css('opacity', '0');
}
})
$('.Input .grad').click(function() {
$(this).parent().find('input').focus();
})
.Input {
position: relative;
width: 100%;
border: none;
width: 200px;
}
.grad {
position: absolute;
cursor: text;
top: 25px;
bottom: 2px;
left: 0;
right: 90%;
opacity: 0;
transition: 0.5s;
z-index: 1;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.8), transparent);
}
.Input:before {
content: '';
position: absolute;
bottom: 0;
width: 100%;
transition: border-bottom 0.5s ease;
border-bottom: 1px solid gainsboro;
}
.Input input {
margin-top: 20px;
height: 40px;
width: 100%;
padding-left: 0;
font-size: 16px;
font-weight: 300;
background-color: transparent;
background-image: linear-gradient(to bottom, gainsboro 50%, tomato 50%);
background-repeat: no-repeat;
background-size: 0 11%;
background-position: 50% 100%;
transition: all 0.5s ease;
box-shadow: none;
}
.Input h1 {
font-size: 16px;
color: gainsboro;
font-weight: 400;
position: absolute;
pointer-events: none;
left: 0;
bottom: 0;
transition: 0.5s ease all;
width: 100%;
line-height: unset;
}
.Input:hover:before {
transition: border-bottom 0.5s ease;
border-bottom: 1px solid dimgray;
}
input:focus {
background-color: transparent;
background-image: linear-gradient(to bottom, transparent 50%, tomato 50%);
background-repeat: no-repeat;
background-size: 100% 11%;
background-position: 50% 100%;
transition: all 0.5s ease;
}
input:focus,
input:not(:focus):valid {
border: none;
outline: none;
}
input:focus~h1,
input:not(:focus):valid~h1 {
color: tomato;
transition: all 0.5s ease;
transform: translateY(-25px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Input">
<span class="grad"></span>
<input type="text" class="Input" name="testInput" value="" data-id="" required>
<h1>
MyInput
</h1>
</div>
<br>

Categories