Forums

Responsive Parallax Area

Permalink
I purchased the Parallax Area Add-on that is available in the store for a clients website, but unfortunately it is not responsive so have had to disable the effect on tablet and smart phones.

Wondered if anyone has been successful with creating a responsive parallax area for activating on sections of pages? I don't want a theme as I create the themes myself.

Would be willing to pay for such an add-on. Thanks.
anete
 
moosh replied on at Permalink Reply
moosh
Hi anete,

It's complicated to enable good parallax on mobile devices because of touch screen and specific performance of the device.

In my development, I generally disable them.

Best,
moosh
anete replied on at Permalink Reply
anete
Thanks for your response @moosh, yes it seems a tricky thing to do.

I have however had a couple of pm's which sound hopeful in being able to do something to make it work. Fingers crossed!
blinkdesign replied on at Permalink Reply
blinkdesign
do i need this addon in order to use the built-in template "parallax"?

> i have a layout in an area and have set a backgound image, then i'm changing in "layout design" to the template "parallax".

how can i make it work properly? i cannot find any documentation in concrete 5 on that built in feature.

i use a cloned version of the elemental theme in 5.7.5.6


thanks
blink
anete replied on at Permalink Reply
anete
Sorry @blink I don't have any answers to your questions.

Thank you to those who have private messaged me. A member is currently assisting me with the Responsive Parallax Area.
pixeljunkie replied on at Permalink Reply
pixeljunkie
Hi Anete
I am currently running into the same issue. I am using the parallax area for a client's website, yet on mobile devices the image does not scale down and it just looks dreadful in portrait .... Any advice (apart from diplay: none on small screens and replacing it with whatever other gallery ....)

Your help is highly appreciated :D
Bettina
anete replied on at Permalink Reply
anete
Hi,
I didn't find a solution to having the parallax effect show on smart phones or tablets but did come up with a solution so that a static image showed on those devices and the parallax effect kicked in on the desktop view. 

<!--parallax image -->
<div class="row">
<div class="twelve columns">
 <?php
        $a = new Area('herowalk1');           
        $a->display($c);
    ?> </div>
</div>
<!--mobile image - note the walk1 class -->
<div class="row">
<div class="twelve columns walk1">
 <?php
        $a = new Area('mobilewalk1');           
        $a->display($c);
    ?> </div>
Viewing 15 lines of 16 lines. View entire code block.


CSS

.page .walk1 {
display: block;
width: 100%;
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
.page .walk1 {
display: none;
}
.ineditmode .walk1 {
display: block;
}
}

I hope that helps.
pixeljunkie replied on at Permalink Reply
pixeljunkie
Hi Anete
Tx for your reply. Yup, that's how I usally »solve« these issues by replacing it by a mobile-friendly image or gallery. Usually I use the common bootstrap classes hidden- ... or visible-...
I guess we will need to wait until the addon developers come up with a more elegant solution.

Tx anyway :D
Bettina