How to implement the effect of scrolling goods, so as on this site? http://foto360.com.ua/

Closed due to the fact that the issue is too general for Regent , aleksandr barakin , user194374, lexxl , Bald July 28, '16 at 7:59 .

Please correct the question so that it describes the specific problem with sufficient detail to determine the appropriate answer. Do not ask a few questions at once. See “How to ask a good question?” For clarification. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • Who is so smart that minus all options? What does not like the option css3 or canvas? What is the solution better? Well, write it here - Red Woolf
  • In your example, 48 peppers and 36 gel pictures from different angles are loaded from the server, the pictures are displayed on the canvas. The onmousedown event is attached to the canvas after the triggering of which the client begins to track changes in the coordinates of the mouse cursor and changes the displayed image in accordance with these changes. - Den

2 answers 2

To implement this effect, you need, of course, to photograph the goods from all sides with a small pitch. The smaller the angle of rotation, the more photos in the end, the smoother the effect.

With all the photos you need, you can realize the "360 effect" directly. For this you can use numerous plugins. For example, here you can find a selection: https://www.sitepoint.com/jquery-360-degrees-image-display-plugins/

    I would use css cube:

    http://codepen.io/chinchang/pen/lLzyB

    <!-- CONTROLS --> <input type="radio" checked id="radio-front" name="select-face"/> <input type="radio" id="radio-left" name="select-face"/> <input type="radio" id="radio-right" name="select-face"/> <input type="radio" id="radio-top" name="select-face"/> <input type="radio" id="radio-bottom" name="select-face"/> <input type="radio" id="radio-back" name="select-face"/> <div class="separator"></div> <div class="space3d"> <div class="_3dbox"> <div class="_3dface _3dface--front"></div> <div class="_3dface _3dface--top"></div> <div class="_3dface _3dface--bottom"></div> <div class="_3dface _3dface--left"></div> <div class="_3dface _3dface--right"></div> <div class="_3dface _3dface--back"></div> </div> </div> <div class="separator"></div> <br><br> <a class="twitter" target="_blank" href="https://twitter.com/chinchang457">@chinchang457</a> <div>Image credits: <a target="_blank" href="http://da-art-work.blogspot.in/">Parag Gour (my brother)</a></div> @import "compass/css3"; // toggle the cube dimensions here. $cubeWidth: 250px; $cubeHeight: 250px; $cubeDepth: $cubeHeight; body { color: #333; padding: 20px; text-align: center; font-family: Arial; } .separator { margin-top: 40px; } .twitter { color: #FFF; text-decoration: none; border-radius: 4px; background: #00ACED; display: inline-block; padding: 10px 8px; margin-bottom: 15px; font-weight: bold; } /* 3D Cube */ .space3d { perspective: 1000px; width: $cubeWidth; height: $cubeHeight; text-align: center; display: inline-block; } ._3dbox { display: inline-block; transition: all 0.85s cubic-bezier(0.175,0.885,0.320,1.275); text-align: center; position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-15deg) rotateY(15deg); } ._3dface { overflow: hidden; position: absolute; border: 1px solid #888; background: #FFF; box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.3); color: #333; line-height: $cubeWidth; opacity: 0.8; } ._3dface--front { width: $cubeWidth; height: $cubeHeight; transform: translate3d(0, 0, $cubeDepth / 2); } ._3dface--top { width: $cubeWidth; height: $cubeDepth; transform: rotateX(90deg) translate3d(0, 0, $cubeHeight / 2); } ._3dface--bottom { width: $cubeWidth; height: $cubeDepth; transform: rotateX(-90deg) translate3d(0, 0, $cubeHeight / 2); } ._3dface--left { width: $cubeDepth; height: $cubeHeight; left: 50%; margin-left: -$cubeDepth / 2; transform: rotateY(-90deg) translate3d(0, 0, $cubeWidth / 2); } ._3dface--right { width: $cubeDepth; height: $cubeHeight; left: 50%; margin-left: -$cubeDepth / 2; transform: rotateY(90deg) translate3d(0, 0, $cubeWidth / 2); } ._3dface--back { width: $cubeWidth; height: $cubeHeight; transform: rotateY(180deg) translate3d(0, 0, $cubeDepth / 2); } #radio-left:checked ~ .space3d ._3dbox { transform: rotateY(90deg); } #radio-right:checked ~ .space3d ._3dbox { transform: rotateY(-90deg); } #radio-bottom:checked ~ .space3d ._3dbox { transform: rotateX(90deg); } #radio-top:checked ~ .space3d ._3dbox { transform: rotateX(-90deg); } #radio-back:checked ~ .space3d ._3dbox { transform: rotateY(180deg); } // Apply backgrounds ._3dface--front { background: url(http://2.bp.blogspot.com/-JxKfUObT4L8/UYYaRhRNJmI/AAAAAAAAAUY/243IlIOKj2c/s320/brahama.jpg); background-size: 100%; } ._3dface--left { background: url(http://4.bp.blogspot.com/-HGFGdCGFTkw/UXVq6PNmS4I/AAAAAAAAAUE/hBNmVCOVlu4/s400/durga+wm.jpg); background-size: auto 100%; } ._3dface--right { background: url(http://2.bp.blogspot.com/-yrnBD8wJ-g0/UNRtPF8pR7I/AAAAAAAAATE/YSpLvqTNyoQ/s320/A+P+J+abdul+kalam_+swm+.jpg); background-size: auto 100%; } ._3dface--top { background: url(http://3.bp.blogspot.com/-mySu8dy4ux4/ULiVKS4YBbI/AAAAAAAAAR0/vBMi_4dAPDE/s400/rajiv+dixit+s.jpg); background-size: auto 100%; } ._3dface--bottom { background: url(http://2.bp.blogspot.com/-B9QWFtc9bVY/UHFs7y9GqkI/AAAAAAAAARI/YLDkoHYr3g4/s400/Gau+wm.jpg); background-size: auto 100%; } ._3dface--back { background: url(http://3.bp.blogspot.com/-ofufG97PpiU/UBzXu-1AisI/AAAAAAAAAP0/iDnhOh-vrb8/s400/shiv+ji.jpg); background-size: auto 100%; }