Change directions on the FrontPage

Start-up Joomla template with amazing CSS3 animated icons, price tables and parallax effect background.
Rate this topic: Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.Evaluations: 1, 1.00 on the average.1.00 out of 6 based on 1 vote(s)
GK User
Mon Jan 13, 2014 1:01 pm
Reply with quote
Report this post
Just wonder, if there are more commands hiden somewhere to change the directions that things move on the Landing page? Like Laptop slides in right-to-left, is it possible to make it move from left-to-right? Tablet slides in from top, I wanted to replace it on my page with the stack of money, but then it'd have to slide in from the bottom up (money gotta grow, you know!?). But those things are just nice, what is really needed is to have prices appear horisonally, instead of vertical appearance. Are those things possible, are there commands for it in the template?
Thanks.
User avatar
Platinum Boarder

GK User
Mon Jan 13, 2014 4:21 pm
Reply with quote
Report this post
It might be possible, but you would need to manually create custom css overrides.
User avatar
Moderator

GK User
Mon Jan 13, 2014 5:14 pm
Reply with quote
Report this post
Cyberek wrote:It might be possible.

I think I've learned how to use that file, but as a sample, would you, please give me the code that does it in the teplate? So I could modify it to suit my needs?
Like, I've created this page http://absolute1.ru/404 and wanted to use same effects, but as of now it overlaps with texts, so I understand that in the example page it was constraining text width somehow... Also the picture is moved way too deep into the text, so it is meneagable somehow - please, show me where that code is, I hope I'd be able to sample it and tweak for other pages... Thanks
User avatar
Platinum Boarder

GK User
Mon Jan 13, 2014 6:26 pm
Reply with quote
Report this post
The animation of img is done this way:
Code: Select all
.gkHorizontalSlideRightColumn img {
margin-left: 100%;
-webkit-transition: margin-left .6s ease;
-moz-transition: margin-left .6s ease;
-ms-transition: margin-left .6s ease;
-o-transition: margin-left .6s ease;
transition: margin-left .6s ease;
}
.gkHorizontalSlideRightColumn.loaded img {
margin-left: 0;
}

When image is in viewport, class .loaded is attached and animation of margin-left happens.
To make it animate from the other dirrection, you would need to find a way to do that correctly. I have tried animating from left to right:
Code: Select all
.gkHorizontalSlideRightColumn img {
margin-left: -100%;
-webkit-transition: margin-left .6s ease;
-moz-transition: margin-left .6s ease;
-ms-transition: margin-left .6s ease;
-o-transition: margin-left .6s ease;
transition: margin-left .6s ease;
}
.gkHorizontalSlideRightColumn.loaded img {
margin-left: 0;
}

but it doesn't look well.
User avatar
Moderator


cron