In this Post, I'll show you how to use HTML and CSS to animate gradients in an endless, linear form. This isn't the only gradient animation approach, but it's one of the most elegant and adaptable in my opinion.
Pure CSS Gradient Background Animation
Gradient Background Animation Html
<div class="d-flex flex-column justify-content-center w-100 h-100">
<div class="d-flex flex-column justify-content-center align-items-center">
<h1 class="fw-light text-white m-0">Pure CSS Gradient Background Animation</h1>
<div class="btn-group my-5">
<a href="https://codepen-api-export-production.s3.us-west-2.amazonaws.com/zip/PEN/pyBNzX/1578778289271/pure-css-gradient-background-animation.zip" class="btn btn-outline-light" aria-current="page"><i class="fas fa-file-download me-2"></i> SOURCE CODE</a>
<a href="https://codepen.io/P1N2O/full/pyBNzX" class="btn btn-outline-light">FULL SCREEN <i class="fas fa-expand ms-2"></i></a>
</div>
<a href="https://manuel.pinto.dev" class="text-decoration-none">
<h5 class="fw-light text-white m-0">— Pen by Manuel Pinto —</h5>
Gradient Background Animation CSS
body { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5,
#23d5ab);
background-size: 400% 400%;
animation:
gradient 15s ease infinite; height: 100vh;
}
@keyframes
gradient
{
0% { background-position: 0% 50%;
}
50%
{
background-position:
100% 50%;
}
100%
{ background-position: 0%
50%;
} }
Skewed background with CSS
Skewed background HTML
<div class="skewed-bg">
<div class="content">
<h1 class="title">Skewed background with CSS</h1>
<p class="text">This is a quick example to show how to
get skewed backgrounds with plain HTML & CSS.</p>
</div>
</div>
<footer class="footer">
<p class="credits">
<a
class="link" href="#"></a>
</p>
</footer>
Skewed background CSS
@import "compass/css3";
$main-color: #00B285;
body{
background: #222;
color: #FFF;
}
.skewed-bg{
background: $main-color;
padding: 200px 0;
@include
transform(skew(0deg, -10deg));
margin-top:
-200px;
.content{
@include transform(skew(0deg, 10deg));
text-align:
center;
.title{
padding-top: 100px;
font-weight:
normal;
}
.text{
width:60%;
margin: 25px auto;
color: lighten($main-color, 55);
}
}
}
.footer{
padding-top: 300px;
.credits{
text-align: center;
color: #666;
.link{
color:
$main-color;
text-decoration: none;
}
}
}
Changing Background Color while scrolling
Changing Background Color while scrolling HTML
<div class="main-wrapper">
<div
class="slide slide-one" data-background="#3498db">
<div class="inside">
<p>I Wanted to create a
really simple pen</p>
</div>
</div>
<div class="slide slide-two"
data-background="#27ae60">
<div
class="inside">
<p>A pen that uses some
awesome colors <br /><span>awesome <a
href="http://flatuicolors.com/" target="_blank">like
these</a></span></p>
</div>
</div>
<div class="slide slide-three"
data-background="#e74c3c">
<div
class="inside">
<p>And that made you
scroll</p>
</div>
</div>
<div class="slide slide-four" data-background="#e67e22">
<div class="inside">
<p>Mission
Accomplished</p>
</div>
</div>
<div class="slide slide-five"
data-background="#9b59b6">
<div
class="inside">
<p>Have an awesome
day</p>
</div>
</div>
<div class="slide slide-five" data-background="#34495e">
<div class="inside">
<p>This
was built a long time ago so I made a better version <a
href="https://codepen.io/Funsella/pen/3271d716c5c6b67c18af6f4ecf9295af/">better
version</a> </p>
</div>
</div>
</div>
Changing Background Color while scrolling CSS
* { box-sizing: border-box }
body {
font-family: 'Coming
Soon', cursive;
transition: background 1s ease;
background: #3498db;
}
p {
color: #ecf0f1;
font-size: 2em;
text-align: center;
}
span
{
clear: both;
font-size: .7em;
color:
#bdc3c7;
}
a {
color: #c0392b;
text-decoration: none;
}
.slide {
.inside {
display: table;
height:
100%;
width: 100%;
padding: 0 3em;
p {
display:
table-cell;
width: 100%;
clear: both;
vertical-align: middle;
text-align: center;
}
}
}
Changing Background Color while scrolling JAVASCRIPT
/**
* This was built using the scrollie jQuery Plugin
*
https://github.com/Funsella/jquery-scrollie
*/
$(
window ).ready(function() {
var wHeight
= $(window).height();
$('.slide')
.height(wHeight)
.scrollie({
scrollOffset : -50,
scrollingInView : function(elem) {
var bgColor = elem.data('background');
$('body').css('background-color', bgColor);
}
});
});
Text-mask background moving on MouseMove
One of the most exciting aspects of creating a page is that we may use our creativity to make it more attractive and lovely. All we need to do now is add some CSS attributes.
We'll change the background picture of the webpage on scroll without affecting the foreground information in this tutorial.
Text-mask background moving on MouseMove HTML
<div class="container">
<div class="title">WEBSITE-DESIGN99</div>
<div class="subtitle">WEBSITE-DESIGN99 </div>
</div>
Text-mask background moving on MouseMove CSS
@mixin center(){
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
left:50%;
top:50%;
}
@import
url(https://fonts.googleapis.com/css?family=Raleway:400,,800,900);
html{
width:100%;
height: 100%;
}
body{
background: -webkit-linear-gradient(rgb(235, 236, 231), rgb(255, 255,
255));
background: linear-gradient(rgb(235, 236, 231), rgb(255,
255, 255));
margin: 0;
width: 100%;
height: 100%;
font-family: 'Raleway', sans-serif;
}
.container{
position:absolute;
@include center();
}
.title{
font-weight: 800;
color: transparent;
font-size:120px;
background:
url("https://phandroid.s3.amazonaws.com/wp-content/uploads/2014/05/rainbow-nebula.jpg")
repeat;
background-position: 40% 50%;
-webkit-background-clip: text;
position:relative;
text-align:center;
line-height:90px;
letter-spacing:
-8px;
}
.subtitle{
display: block;
text-align: center;
text-transform: uppercase;
padding-top:10px;
}
Text-mask background moving on MouseMove JAVASCRIPT
$(document).ready(function(){
var mouseX, mouseY;
var ww = $( window ).width();
var wh = $( window ).height();
var traX, traY;
$(document).mousemove(function(e){
mouseX = e.pageX;
mouseY = e.pageY;
traX = ((4 * mouseX) / 570) + 40;
traY = ((4 *
mouseY) / 570) + 50;
console.log(traX);
$(".title").css({"background-position": traX + "%" + traY + "%"});
});
});
CSS background change on scroll
One of the most exciting aspects of creating a page is that we may use our creativity to make it more attractive and lovely. All we need to do now is add some CSS attributes. We'll change the background picture of the webpage on scroll without affecting the foreground information in this Codding.
CSS background change on scroll HTML
<!-- Optional content you want to persist between sections -->
<div
class="content">design99<br></div>
<section
class="one">
<div class="wrapper"></div>
</section>
<section
class="two">
<div class="wrapper"></div>
</section>
<section
class="three">
<div class="wrapper"></div>
</section>
<section
class="four">
<div class="wrapper"></div>
</section>
CSS background change on scroll CSS
%fixedbox {
// Basic styling
box-sizing:
border-box;
display: block;
font-size: 4em;
padding: 1em;
width: 6em;
height: 3em;
// Center box in middle of screen
position: fixed;
top: 50%;
left: 50%;
transform:
translate3d(-50%,-50%,0);
}
.content {
// Basic
styling
@extend %fixedbox;
font-weight: bold;
text-align: center;
z-index: 1000;
// Cut-out text
effect
background: #fff;
color:
#000;
mix-blend-mode: lighten;
}
section {
// Background image styling
background-repeat: no-repeat;
background-size: cover;
// Reset stacking
context
isolation: isolate;
//
Must be set to correctly position .wrapper below
position:
relative;
// Height not required. Can be left
as auto
height: 100vh;
padding: 1em;
}
.wrapper
{
// Hides box (&:before) outside of section
clip: rect(auto auto auto auto);
// Clip works
only on positions absolute or fixed
position: absolute;
// Stretch to fill entire section
top: 0;
right: 0;
bottom: 0;
left:
0;
&:before {
content:
" ";
// Basic styling
@extend %fixedbox;
padding: 2em 3.5em;
// Blend with background
mix-blend-mode: darken;
}
}
.one {
//
Section background image
background-image:
url(https://source.unsplash.com/1920x1080?nature);
.wrapper:before {
// Box background color
background: red;
}
}
.two {
background-image: url(https://source.unsplash.com/1920x1080?landscape);
.wrapper:before {
background: #faaa54;
mix-blend-mode: difference;
}
}
.three {
background-image: url(https://source.unsplash.com/1920x1080?portrait);
.wrapper:before {
background: #6c320a;
mix-blend-mode: screen;
}
}
.four {
background-image: url(https://source.unsplash.com/1920x1080?stars);
.wrapper:before {
background: #e4135d;
}
}
Post a Comment