CODEWITHSUNDEEP
csscss-animations
Epic
Epic

Reputation: 320

animate div color plus hover animation

I have a line created out of a div now what i am trying to do is animate the div color, background grey, then it fills white, then the white fills back to grey like its sliding through. then on hover the line and text slide up about 10px, then when release it goes back to default position.

like this one here at the bottom example

.scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 340;
    display: inline-block;
    width: 4.16667%;
    height: 6.66667%;
    min-height: 60px;
    font-family: 'rajdhani', 'Helvetica Neue', Helvetica, sans-serif;
    font-weight: bold;
    font-style: normal;
    color: #000;
    font-size: 16px;
}
.scroll-indicator .border-grey {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    width: 2px;
    height: 100%;
    background: #333;
}
.scroll-indicator .border {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 200;
    width: 2px;
    height: 100%;
    background: #000;
}
.scroll-indicator em {
    display: inline-block;
    font-style: normal;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    position: absolute;
    left: 0px;
    top: 12px;
}

@media screen and (max-width: 800px) {
.scroll-indicator {
    bottom: 0;
}
}
<a href="" class="scroll-indicator" style="opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);">
		<div class="border-grey"></div>
		<div class="border" style="transform: matrix(1, 0, 0, 1, 0, 0); transform-origin: 0% 0% 0px;"></div>
		<em>scroll</em>
	</a>

Upvotes: 1

Views: 211

Answers (1)

Romulo
Romulo

Reputation: 5114

You could make use of CSS3 animations and transitions to implement that behaviour.

To implement an animation it's usually good to understand what is happening before trying to code it. In this case we can describe it in 3 easy steps:

  1. element starts in top: 0 with height: 0
  2. element stay in top: 0 with height: 100%
  3. element moves to top: 100% with height: 0

With that in mind we can just code our keyframe.

Following is a small example on how to do it:

body {
  background: #555;
}

.scroll-indicator {
	position: absolute;
	bottom: 0;
	width: 30px;
	left: 50%;
	height: 60px;
	transition: height .25s linear;
	cursor: pointer;
}

.scroll-indicator:hover {
	height: 75px;
}

.scroll-indicator .border-grey {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 2px;
	background: #333;
}

.scroll-indicator .border-white {
	position: absolute;
	top: 0;
	left: 0;
	width: 2px;
	background: #fff;
	animation-name: animation;
    animation-duration: 3s;
	animation-iteration-count: infinite;
}

.scroll-indicator span {
	transform: rotate(-90deg);
	position: absolute;
	top: 10px;
  color: #fff;
}

@keyframes animation {
	0% {
		height: 0;
	}
	33% {
		top: 0;
		height: 100%;
	}
	66% {
		top: 100%;
		height: 0;
	}
	100% {}
}
<div class="scroll-indicator">
	<div class="border-grey"></div>
	<div class="border-white"></div>
	<span>scroll</span>
</div>

Upvotes: 1

Related Questions