Inspiring

Answered

How is this parallax "down" arrow done?

Forum|Forum|9 years ago
May 29, 2017
3 replies
1414 views

I'm using fluid grid layout and came across this parallax "arrow" effect and was wondering if someone knew how it was done, looks to be an .svg image... should I create a new fluid div and insert this .svg image within to "mask" out the image?

http://prntscr.com/fdfela

Brandon

This topic has been closed for replies.

Correct answer osgood_

brandonw6890098 wrote
Nancy,
Thanks for letting me know about Fluid Grid being depricated... now I won't have to waste my time and will focus on DW CC!
It's cool you can make a triangle in CSS, I'll try to figure out how they've created that effect, the triangle seems to be integrated into the parallax bar here's the actual link hope you can access: https://goo.gl/hEjNSw
As you scroll up you can see what I mean, the triangle is part of the lower bar.
Brandon

That arrow is an svg image. The structure is hugley complex, made up of 3 <divs> with the svg being the middle <div> then all 3 <divs> are superimposed over the background image in a parent <div>. Whilst the visual aspect of the layout is undoubtedly extremely eye-catching, very nice, the complete code is a terrible mess. It would be because its a Wordpress site, all Wordpress sites are a complete mess because they generally use lots of js files, bloated plugins to do what 3 or 4 lines of dedicated js could do and extremely unruly class names for components. It's this kind of workflow/coding that makes me want to vomit and give up on website design.

The thing is those that use Wordpress are not meant to look at the code so those that invented it thought it wouldn't matter much what quality of coding it produced. Well heres some news, unfortunately Wordpress became a mainstream bit of bloated software that developers began to use for producing websites, not just ugly blogs. The code was never updated to reflect this and mostly remains in its origianal 'untenable' bloated state.

In the real web devlopement world we would do something very different - below is some simple code that you may be able to hopefully understand a bit better. The layout is not styled - it's just a simple example that shows you how you can achieve the effect in a more controlled fashion, with less code.

<!DOCTYPE html>

<html>

<head>

<title>Arrow</title>

<style>

body {

margin: 0;

}

* {

box-sizing: border-box;

}

/*BACKGROUND IMAGE */

.bg-image {

position: relative;

height: 650px;

background-position: center center;

background-image: url('http://images.all-free-download.com/images/graphiclarge/butterfly_on_coneflower_194994.jpg');

background-attachment: fixed;

background-size: cover;

background-repeat: no-repeat;

}

/*BACKGROUND IMAGE TEXT */

.bg-image-text {

position: absolute;

width: 100%;

text-align: center;

bottom: 200px;

color:#fff;

text-transform: uppercase;

}

/* CREATE ARROW */

.arrow {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

position: absolute;

width: 100%;

bottom: 0;

}

.arrow-right {

width: 50%;

height: 0;

border-left: 0 solid transparent;

border-right: 35px solid transparent;

border-bottom: 35px solid white;

}

.arrow-left {

width: 50%;

height: 0;

border-left: 35px solid transparent;

border-right: 0 solid transparent;

border-bottom: 35px solid white;

}

/* END CREATE ARROW */

.content {

text-align: center;

}

.content p {

max-width: 60%;

margin: 0 auto 15px auto;

}

</style>

$(document).ready(function() {

$(window).bind("resize scroll",function(e) {

var y = $(window).scrollTop();

$(".bg-image").filter(function() {

return $(this).offset().top < (y + $(window).height())

}).css('background-position', 'center ' + parseInt(-y / 2) + 'px');

});

</script>

</head>

<body>

</div>

</div>

</div>

<h1>Discover</h1>

<h3>OUR STORY IS AWESOME</h3>

<p>Lorem ipsum dolor sit amet, feugiat delicata liberavisse id cum, no quo maiorum intellegebat, liber regione eu sit. Mea cu case ludus integre, vide viderer eleifend ex mea. His ay diceret, cum et atqui placerat. Lorem ipsum dolor sit amet, feugiat delicata liberavisse id cum.</p>

</div>

</body>

</html>

O

osgood_

Legend

brandonw6890098 wrote
I'm using fluid grid layout and came across this parallax "arrow" effect and was wondering if someone knew how it was done, looks to be an .svg image... should I create a new fluid div and insert this .svg image within to "mask" out the image?
http://prntscr.com/fdfela

Without seeing the code it's not possible to tell but at a guess I would say it is some kind of image given the very subtle curves associated with the arrow.

A

Anonymous

Original:

Chandelier – Just another WordPress site

Fenja

Nancy OShea

Community Expert

Another thought, you can make triangles with CSS code. See example below.

<!DOCTYPE html>

<head>

<title>CSS Arrow Box</title>

<style>

.arrow_box {

position: relative;

background: url(http://lorempixel.com/900/500/abstract/2) no-repeat center center;

background-size: cover;

color: #FFF;

box-shadow: inset 5px 5px 50px #0d0a0f;

padding: 10%;

}

.arrow_box:after, .arrow_box:before {

top: 100%;

left: 50%;

border: solid transparent;

content: " ";

height: 0;

width: 0;

position: absolute;

cursor: pointer;

}

.arrow_box:after {

border-color: rgba(12, 14, 15, 0);

border-top-color: #0d0a0f;

border-width: 60px;

margin-left: -60px;

}

.arrow_box:before {

border-color: rgba(12, 14, 15, 0);

border-top-color: #0d0a0f;

border-width: 66px;

margin-left: -66px;

}

</style>

</head>

<body>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa saepe nam iste, quisquam ut consequuntur a! Totam temporibus odit rem, cupiditate consequuntur nam blanditiis sint, ducimus, labore, veniam veritatis non?</p>

</div>

</body>

</html>

Nancy

Nancy O'Shea— Product User & Community Expert

LGMTLAuthor

Inspiring

Nancy,

Thanks for letting me know about Fluid Grid being depricated... now I won't have to waste my time and will focus on DW CC!

It's cool you can make a triangle in CSS, I'll try to figure out how they've created that effect, the triangle seems to be integrated into the parallax bar here's the actual link hope you can access: https://goo.gl/hEjNSw

As you scroll up you can see what I mean, the triangle is part of the lower bar.

Brandon

O

osgood_Correct answer

Legend

brandonw6890098 wrote
Nancy,
Thanks for letting me know about Fluid Grid being depricated... now I won't have to waste my time and will focus on DW CC!
It's cool you can make a triangle in CSS, I'll try to figure out how they've created that effect, the triangle seems to be integrated into the parallax bar here's the actual link hope you can access: https://goo.gl/hEjNSw
As you scroll up you can see what I mean, the triangle is part of the lower bar.
Brandon

That arrow is an svg image. The structure is hugley complex, made up of 3 <divs> with the svg being the middle <div> then all 3 <divs> are superimposed over the background image in a parent <div>. Whilst the visual aspect of the layout is undoubtedly extremely eye-catching, very nice, the complete code is a terrible mess. It would be because its a Wordpress site, all Wordpress sites are a complete mess because they generally use lots of js files, bloated plugins to do what 3 or 4 lines of dedicated js could do and extremely unruly class names for components. It's this kind of workflow/coding that makes me want to vomit and give up on website design.

The thing is those that use Wordpress are not meant to look at the code so those that invented it thought it wouldn't matter much what quality of coding it produced. Well heres some news, unfortunately Wordpress became a mainstream bit of bloated software that developers began to use for producing websites, not just ugly blogs. The code was never updated to reflect this and mostly remains in its origianal 'untenable' bloated state.

In the real web devlopement world we would do something very different - below is some simple code that you may be able to hopefully understand a bit better. The layout is not styled - it's just a simple example that shows you how you can achieve the effect in a more controlled fashion, with less code.

<!DOCTYPE html>

<html>

<head>

<title>Arrow</title>

<style>

body {

margin: 0;

}

* {

box-sizing: border-box;

}

/*BACKGROUND IMAGE */

.bg-image {

position: relative;

height: 650px;

background-position: center center;

background-image: url('http://images.all-free-download.com/images/graphiclarge/butterfly_on_coneflower_194994.jpg');

background-attachment: fixed;

background-size: cover;

background-repeat: no-repeat;

}

/*BACKGROUND IMAGE TEXT */

.bg-image-text {

position: absolute;

width: 100%;

text-align: center;

bottom: 200px;

color:#fff;

text-transform: uppercase;

}

/* CREATE ARROW */

.arrow {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

position: absolute;

width: 100%;

bottom: 0;

}

.arrow-right {

width: 50%;

height: 0;

border-left: 0 solid transparent;

border-right: 35px solid transparent;

border-bottom: 35px solid white;

}

.arrow-left {

width: 50%;

height: 0;

border-left: 35px solid transparent;

border-right: 0 solid transparent;

border-bottom: 35px solid white;

}

/* END CREATE ARROW */

.content {

text-align: center;

}

.content p {

max-width: 60%;

margin: 0 auto 15px auto;

}

</style>

$(document).ready(function() {

$(window).bind("resize scroll",function(e) {

var y = $(window).scrollTop();

$(".bg-image").filter(function() {

return $(this).offset().top < (y + $(window).height())

}).css('background-position', 'center ' + parseInt(-y / 2) + 'px');

});

</script>

</head>

<body>

</div>

</div>

</div>

<h1>Discover</h1>

<h3>OUR STORY IS AWESOME</h3>

<p>Lorem ipsum dolor sit amet, feugiat delicata liberavisse id cum, no quo maiorum intellegebat, liber regione eu sit. Mea cu case ludus integre, vide viderer eleifend ex mea. His ay diceret, cum et atqui placerat. Lorem ipsum dolor sit amet, feugiat delicata liberavisse id cum.</p>

</div>

</body>

</html>

Nancy OShea

Community Expert

If it's an SVG, a screenshot won't tell us anything. We would need to see the code.

I don't recommend attempting a Parallax effect with those legacy Fluid Grid Layouts which DW CC removed. A better choice would be Bootstrap with Parallax scrolling.

In this example, the top menu triggers scrolling. But you could use arrows, buttons or whatever...

Bootstrap Parallax Template

Nancy

Nancy O'Shea— Product User & Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded