365 posts
  • Has been part of the Envato Community for over 5 years
  • Has collected 500+ items on Envato Market
  • Located in United Kingdom
kops says

Wowed by this: http://www.lobagola.com/

Anyone come across this effect before?

1699 posts Building the Web.
  • Has been a beta tester for an Envato feature
  • Sells items exclusively on Envato Market
  • Has sold $250,000+ on Envato Market
  • Had an item featured on Envato Market
+8 more
ZoomIt says

The static image is just a div with background -image – http://www.lobagola.com/web-assets/img/slide_2.jpg

But the 3D effect is encapsulated in a canvas so it’s hard to say without looking at the javascript – it could use something like this – http://www6.compuland.com.br/vilhenaimoveis/exemplo/panorama1.jpg a panorama image and scroll it ( simplest solution ) or render a 3d effect on a flat image.

Anyway, effect not that hard to make, you just need right images.

611 posts Don't be so humble - you are not that great.
  • Has referred 50+ members
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has collected 10+ items on Envato Market
  • Helped protect Envato Market against copyright violations
+5 more
plusquare says

Check our expo360 plugin on codecanyon, we use different images to achieve that effect, I think that’s exactly the same, it’s just different images updated on scroll :)

3503 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $750,000+ on Envato Market
  • Located in United States
  • Helps us moderate the forums
+10 more
sevenspark Moderator says

Looks like they are using KineticJS, if that’s helpful

2629 posts aspire to create - create to inspire
  • Helped several times protecting Envato Market against copyright violations
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $125,000+ on Envato Market
  • Made it to the Authors' Hall of Fame
+10 more
Creattive says

you need to have several pictures of several angles. The center picture is shown in the slider without clicking a button. when you click on an arrow, the other frames are quickly shown (like a video).

So the magic is actually the images by user input, not the slider. all the slider does is show several images one after another while changing the slide.

365 posts
  • Has been part of the Envato Community for over 5 years
  • Has collected 500+ items on Envato Market
  • Located in United Kingdom
kops says

Cheers for the responses – Just trying to figure out how the loading time can be fast(ish) when if, as you say, several frames of large jpgs are getting loaded in. I’ll get there :)

1699 posts Building the Web.
  • Has been a beta tester for an Envato feature
  • Sells items exclusively on Envato Market
  • Has sold $250,000+ on Envato Market
  • Had an item featured on Envato Market
+8 more
ZoomIt says

Those images are low resolution

501 posts
  • Has referred 1000+ members
  • Has sold $250,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
+8 more
pixelentity says
365 posts
  • Has been part of the Envato Community for over 5 years
  • Has collected 500+ items on Envato Market
  • Located in United Kingdom
kops says

ahhh got you. thanks for extracting that :)

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by