Jump to content
  • 0

Эффект как на сайте apple точка com

kattiperk

Asked by kattiperk,

 Share

Question

kattiperk Explorer

kattiperk

Posted
Posted

Здравствуйте.

 

Есть всем известный сайт.

К хроме, опере и яндекс при прокрутке можно увидеть эффект.

 

Кто-нибудь знает, как такое можно осуществить?

Похоже на параллакс, потому что текст при скролее смещается.

На вид не сложный.

 

Спасибо. кто что знает где что взять)

 

 

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0
lexxcode Explorer

lexxcode

Posted
Posted

Я не сильно вникал как конкретно сделано на сайте. Для начала можно глянуть в сторону skrollr. Настроить кейпоинты и по ним выполнять те или иные изменения на странице. Для анимаций можно использовать GSAP. А дальше все просто

  • Like 1
Link to comment
Share on other sites
  • 0
lexxcode Explorer

lexxcode

Posted
Posted
думала такое, но казалось, что где-то эта зрень существует готовая

Надо было тогда задавать вопрос иначе, не "как такое можно осуществить?", а "покажите готовый пример" :)

А то я подумал тебя интересует с помощью чего можно реализовать, вот я и скинул :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • kirillov
      Не вводится текст в поле ввода
      By kirillov
      Добрый день. Написал сайт и встречается такая проблема на устройствах от apple (конкретно Iphone 5). В форму заявки в поля input не вводятся никакие символы. Посоветуйте пожалуйста. Спасибо.
    • dannydallion
      Снова выравнивание. VTEM Image Zoom
      By dannydallion
      Модуль и плагин. Одинаковая загвоздка.
      Не могу изменить размер и выравнивание основного изображения, которое используется как превью.
      Здесь модулем вставлена верхняя картинка, те, что ниже - кодом, то есть через плагин в статью.
      В настройке модуля указываю его размер, игнорируется.
      Сама картинка имеет размер 450*300. Отображается 250*167
      Нигде не нашла пункта, где задавался бы размер.
      И хотелось бы разместить изображение по центру, опять же - нету.
       

       
      В файлах css - ничего, что прямо указывало бы на размер и выравнивание.
      Кто-то использует этот плагин-модуль?
      Пожалуйста, помогите разобраться.
       
    • MrMoska
      Нужны комментарии по готовому скрипту (magnifier)
      By MrMoska
      Воспользовался готовым скриптом по увеличению картинки при нажатии. И столкнулся с ситуацией, что при ручном выставлении размеров картинки (в dreamweaver), ее увеличение происходит пропорционально.
      Т.е. чем меньше я делаю картинку в миниатюре, тем меньше она становится в увеличенном состоянии (итог - плохая читаемость). 
      Мне надо увеличить картинку до конкретного размера, не зависимо какой величины я сделаю миниатюру. 
       
      Как я понимаю увеличение происходит в процентом соотношении или по коэффициентам, но я не могу найти команду в коде которая отвечает за "размер зума"
       
      Помогите разобраться. 
       
      Кстати курсор почему-то при наведении на картинку не меняется на лупу, так же пока не разобрался почему
      /* jQuery Image Magnify script v1.1* This notice must stay intact for usage * Author: Dynamic Drive at http://www.dynamicdrive.com/*'>http://www.dynamicdrive.com/* Visit http://www.dynamicdrive.com/ for full source code* Nov 16th, 09 (v1.1): Adds ability to dynamically apply/reapply magnify effect to an image, plus magnify to a specific width in pixels.* Feb 8th, 11 (v1.11): Fixed bug that caused script to not work in newever versions of jQuery (ie: v1.4.4)*/jQuery.noConflict()jQuery.imageMagnify={ dsettings: { magnifyby: 3, //óìîë÷àíèþ óâåëè÷åíèå ôàêòîðà óâåëè÷åííîå èçîáðàæåíèå duration: 500, //ïî óìîë÷àíèþ ïðîäîëæèòåëüíîñòü àíèìàöèè, â ìñåê imgopacity: 0.2 //opacify îðèãèíàëüíîãî èçîáðàæåíèÿ, êîãäà óâåëè÷åííîå èçîáðàæåíèå íàêëàäûâàåòñÿ îí }, cursorcss: 'url(magnify.cur), -moz-zoom-in, -webkit-zoom-in', //Çíà÷åíèå àòðèáóòà CSS â "Êóðñîð", â äîïîëíåíèå ê èñõîäíîìó èçîáðàæåíèþ zIndexcounter: 100, refreshoffsets:function($window, $target, warpshell){ var $offsets=$target.offset() var winattrs={x:$window.scrollLeft(), y:$window.scrollTop(), w:$window.width(), h:$window.height()} warpshell.attrs.x=$offsets.left //update x position of original image relative to page warpshell.attrs.y=$offsets.top warpshell.newattrs.x=winattrs.x+winattrs.w/2-warpshell.newattrs.w/2 warpshell.newattrs.y=winattrs.y+winattrs.h/2-warpshell.newattrs.h/2 if (warpshell.newattrs.x<winattrs.x+5){ //no space to the left? warpshell.newattrs.x=winattrs.x+5 } else if (warpshell.newattrs.x+warpshell.newattrs.w > winattrs.x+winattrs.w){//no space to the right? warpshell.newattrs.x=winattrs.x+5 } if (warpshell.newattrs.y<winattrs.y+5){ //no space at the top? warpshell.newattrs.y=winattrs.y+5 } }, magnify:function($, $target, options){ var setting={} //create blank object to store combined settings var setting=jQuery.extend(setting, this.dsettings, options) var attrs=(options.thumbdimensions)? {w:options.thumbdimensions[0], h:options.thumbdimensions[1]} : {w:$target.outerWidth(), h:$target.outerHeight()} var newattrs={} newattrs.w=(setting.magnifyto)? setting.magnifyto : Math.round(attrs.w*setting.magnifyby) newattrs.h=(setting.magnifyto)? Math.round(attrs.h*newattrs.w/attrs.w) : Math.round(attrs.h*setting.magnifyby) $target.css('cursor', jQuery.imageMagnify.cursorcss) if ($target.data('imgshell')){ $target.data('imgshell').$clone.remove() $target.css({opacity:1}).unbind('click.magnify') } var $clone=$target.clone().css({position:'absolute', left:0, top:0, visibility:'hidden', border:'1px solid gray', cursor:'pointer'}).appendTo(document.body) $clone.data('$relatedtarget', $target) //save $target image this enlarged image is associated with $target.data('imgshell', {$clone:$clone, attrs:attrs, newattrs:newattrs}) $target.bind('click.magnify', function(e){ //action when original image is clicked on var $this=$(this).css({opacity:setting.imgopacity}) var imageinfo=$this.data('imgshell') jQuery.imageMagnify.refreshoffsets($(window), $this, imageinfo) //refresh offset positions of original and warped images var $clone=imageinfo.$clone $clone.stop().css({zIndex:++jQuery.imageMagnify.zIndexcounter, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h, opacity:0, visibility:'visible', display:'block'}) .animate({opacity:1, left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration, function(){ //callback function after warping is complete //none added }) //end animate }) //end click $clone.click(function(e){ //action when magnified image is clicked on var $this=$(this) var imageinfo=$this.data('$relatedtarget').data('imgshell') jQuery.imageMagnify.refreshoffsets($(window), $this.data('$relatedtarget'), imageinfo) //refresh offset positions of original and warped images $this.stop().animate({opacity:0, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h}, setting.duration, function(){ $this.hide() $this.data('$relatedtarget').css({opacity:1}) //reveal original image }) //end animate }) //end click }};jQuery.fn.imageMagnify=function(options){ var $=jQuery return this.each(function(){ //return jQuery obj var $imgref=$(this) if (this.tagName!="IMG") return true //skip to next matched element if (parseInt($imgref.css('width'))>0 && parseInt($imgref.css('height'))>0 || options.thumbdimensions){ //if image has explicit width/height attrs defined jQuery.imageMagnify.magnify($, $imgref, options) } else if (this.complete){ //account for IE not firing image.onload jQuery.imageMagnify.magnify($, $imgref, options) } else{ $(this).bind('load', function(){ jQuery.imageMagnify.magnify($, $imgref, options) }) } })};jQuery.fn.applyMagnifier=function(options){ //dynamic version of imageMagnify() to apply magnify effect to an image dynamically var $=jQuery return this.each(function(){ //return jQuery obj var $imgref=$(this) if (this.tagName!="IMG") return true //skip to next matched element }) };//** The following applies the magnify effect to images with class="magnify" and optional "data-magnifyby" and "data-magnifyduration" attrs//** It also looks for links with attr rel="magnify[targetimageid]" and makes them togglers for that imagejQuery(document).ready(function($){ var $targets=$('.magnify') $targets.each(function(i){ var $target=$(this) var options={} if ($target.attr('data-magnifyto')) options.magnifyto=parseFloat($target.attr('data-magnifyto')) if ($target.attr('data-magnifyby')) options.magnifyby=parseFloat($target.attr('data-magnifyby')) if ($target.attr('data-magnifyduration')) options.duration=parseInt($target.attr('data-magnifyduration')) $target.imageMagnify(options) }) var $triggers=$('a[rel^="magnify["]') $triggers.each(function(i){ var $trigger=$(this) var targetid=$trigger.attr('rel').match(/\[.+\]/)[0].replace(/[\[\]']/g, '') //parse 'id' from rel='magnify[id]' $trigger.data('magnifyimageid', targetid) $trigger.click(function(e){ $('#'+$(this).data('magnifyimageid')).trigger('click.magnify') e.preventDefault() }) })})
    • Nescafe
      Как сделать кнопки переключающие контент?
      By Nescafe
      Друзья, как сделать так, как реализовано на сайте apple http://www.apple.com/ru/osx/server/ Под картинкой 2 кнопки, "клиент" и "сервер", при нажатии на них меняется картинка. Пробовал сам, получилось вот так http://jsfiddle.net/Ftfhb/9/ . Но как-то коряво
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept