shayan

افکت در اسکرول پارالکس

15 پست در این موضوع قرار دارد

سلام دوستان

وقت بخیر

یه سایتی هست به نام wix

1- میخواستم بدونم چطور میشه بعد از مدت کوتاهی پس از ورود به سایت سکشن بعدی بیاد روی کار ( دقیقا مثل نمونه )

2- اسکرول ها رو چطور مثل اون طراحی کنم؟

ببینید من ایمیج های هر سکشن رو فول اسکرین کردم ، محتوای هر سکش رو هم قرار دادم

حالا میخوام دقیقا مثل نمونه تصویر ثابت باشه و با اسکرول محتوای سکشنم اسکرول بشه و پس از اتمام سکش بعدی بیاد روی کار

 

پیشاپیش ممنون از راهنماییتون ♥

 

0

به اشتراک گذاری این پست


لینک به پست
در 13 ساعت قبل، imanfakhar گفته است :

استاد عزیز ممنون

یه چند تا نکته

اول اینکه من فقط میخوام کپشن دوم بیاد رو کپش اول و برای مابقی اینطور نباشه و با اسکرول تغییر کنه

دوم اینکه من میخوام محتوای هر کپشن هم در ابتدا و انتهای اسکرول با فید بیاد و بره

0

به اشتراک گذاری این پست


لینک به پست
در ۱ ساعت قبل، imanfakhar گفته است :

استاد من تمام کد ها رو با دقت اعمال کردم

گویا تداخلی رخ داده که برای بنده اعمال نمیشه

امکانش هست کل کار رو براتون بفرستم بررسی بفرمایید؟

0

به اشتراک گذاری این پست


لینک به پست

نه متاسفانه هم من فرصتش رو ندارم هم طبق قوانین انجمن ممنوعه 

نمونه همراه با کدهاش تو لینک موجوده و به درستی هم داره کار می کنه 

 

1

به اشتراک گذاری این پست


لینک به پست
در 3 دقیقه قبل، imanfakhar گفته است :

نه متاسفانه هم من فرصتش رو ندارم هم طبق قوانین انجمن ممنوعه 

نمونه همراه با کدهاش تو لینک موجوده و به درستی هم داره کار می کنه 

 

فقط یه موضوعی

اونم اینه که من نمیخوام تصویر فید این و فید اوت بشه

فقط محتوای سکشن ها منظورم بود

کدوم قسمت رو تغییر بدم؟

0

به اشتراک گذاری این پست


لینک به پست

تصاویر رو از بک گراند div به بک گراند section والدش انتقال بدید

1

به اشتراک گذاری این پست


لینک به پست
در 20 ساعت قبل، imanfakhar گفته است :

تصاویر رو از بک گراند div به بک گراند section والدش انتقال بدید

استاد با عرض پوزش

من یه اتفاق جالب برام افتاده

اونم اینه که تو اتچ کردن این سه نوع کد مشکل پیدا کردم !!!:rolleyes::D

یه چیز دم دستیه

ولی خب نمیدونم باید چیکار کنم

قسمت css رو گذاشتم تو استایل ها

قسمت js رو هم یه فایل ایجاد کردم و به این شکل اتچ کردم

<script type="text/javascript" src="js/scrol.js"></script>

این محتوا رو

jQuery(document).ready(function() {
  jQuery(".section,.section>.div").each(function(i) {
    var h = jQuery(window).height();
    var h = h + "px";
    jQuery(this).css({
      'minHeight': h,
    });

  });
  jQuery(".section>.div").fadeTo(100, .001);

  function sectionAutoScroll() {
    setTimeout(function() {
      jQuery(".section.active").each(function() {
        if (!jQuery(this).is(":last-child")) {
          var pos = jQuery(this).next(".section").position();
          jQuery(this).removeClass("active").next(".section").addClass("active");
          jQuery("html,body").animate({
            'scrollTop': pos.top
          }, 1500);
        }
      })

    }, 2000);
  }
  sectionAutoScroll();
  jQuery(window).scroll(function() {
    var s = jQuery(this).scrollTop();
    jQuery(".section").each(function() {
      var pos = jQuery(this).position();
      var h = jQuery(this).height();
      var min = parseFloat(pos.top) - 100;
      var max = parseFloat(min) + parseFloat(h) + 300;
      jQuery(this).removeClass("active");
      if (s >= min && s < max) {
        jQuery(this).find(".div").stop().fadeTo(800, 1);
      }
    });
  });
});

فک کنم یه جا اشتباه کردم:(

0

به اشتراک گذاری این پست


لینک به پست

اگر تو قالب وردپرس دارید اسکریپت رو استفاده می کنید و پوشه js  توی پوشه روت قالبتون کد احضار اسکریپتون می شه

<script type="text/javascript" src="<?php bloginfo('url');?>/js/scrol.js"></script>

و قبل از آدرس استایل هم باید 

<?php bloginfo('url');?>/

اضافه بشه

در ضمن کد اسکریپت حتما باید بعد از 

<?php wp_head();?>

توی فایل header.php باشه اگه پیدا کردن تابع براتون سخته بگذاریدش تو footer.php

1

به اشتراک گذاری این پست


لینک به پست
در 17 ساعت قبل، imanfakhar گفته است :

اگر تو قالب وردپرس دارید اسکریپت رو استفاده می کنید و پوشه js  توی پوشه روت قالبتون کد احضار اسکریپتون می شه


<script type="text/javascript" src="<?php bloginfo('url');?>/js/scrol.js"></script>

و قبل از آدرس استایل هم باید 


<?php bloginfo('url');?>/

اضافه بشه

در ضمن کد اسکریپت حتما باید بعد از 


<?php wp_head();?>

توی فایل header.php باشه اگه پیدا کردن تابع براتون سخته بگذاریدش تو footer.php

نه عزیز دل

در حال کد نویسی css و html هستم

ولی جالب اینجاست که یه فایل مجزا از کارم هم ایجاد کردم برای تست نتیجه نگرفتم !!!

مشاهده بفرمایید فایل پیوست شده رو

 

test.zip

0

به اشتراک گذاری این پست


لینک به پست

شما اصلا جی کوئری رو احضارش نکردید که؟

تمام اسکریپتهایی که با jQuery یا $ شروع می شند احتیاج به یک کتابخانه جی کوئری هم دارند تو لینکی که دادم هم اگر دیتیل جاوااسکریپتش رو می دید کتابخانه بهش معرفی شده بود

test.zip

2

به اشتراک گذاری این پست


لینک به پست
در در 5/12/2016 at 05:04، imanfakhar گفته است :

شما اصلا جی کوئری رو احضارش نکردید که؟

تمام اسکریپتهایی که با jQuery یا $ شروع می شند احتیاج به یک کتابخانه جی کوئری هم دارند تو لینکی که دادم هم اگر دیتیل جاوااسکریپتش رو می دید کتابخانه بهش معرفی شده بود

test.zip

استاد عزیز اولا سپاس بابت پیگیری

ثانیا یه چیزی رو فراموش کردید که اعمال کنید

اونم اینه که من میخوام اسکرول به هر سکشن رسید ، سکشن و تصویر ثابت بمونه و محتوا از پایین به بالا تیتراژ وار بره با فید این و فید اوت

یه نگاهی به سایت wix.com بندازید کاملا متوجه منظور بنده میشید

0

به اشتراک گذاری این پست


لینک به پست

کدها رو بخونید همه چیزش مشخصه و هرجور خواستید شخصی سازی کنید

0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

در در 5/14/2016 at 19:40، imanfakhar گفته است :

کدها رو بخونید همه چیزش مشخصه و هرجور خواستید شخصی سازی کنید

سلام مجدد استاد

یه سوال

من الان سایتم رو به سبک فول پیج اسکرول طراحی کردم

که با تک اسکرول کل سکشن اسکرول میشه

هر سکشن هم آی دی داره

الان میخوام تو جیکوئری بگم که بعد از فلان ثانیه پس از لود کامل سایت ، اسکرول بشه به فلان آیدی

چی باید بنویسم؟

ویرایش شده در توسط shayan
0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری