رفتن به مطلب

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


shayan

پست های پیشنهاد شده

سلام دوستان

وقت بخیر

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

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

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

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

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

 

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

 

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

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

یه چند تا نکته

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

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

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

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

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

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

لینک به ارسال

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

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

 

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

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

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

 

فقط یه موضوعی

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

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

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

لینک به ارسال
در 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);
      }
    });
  });
});

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

لینک به ارسال

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

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

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

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

اضافه بشه

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

<?php wp_head();?>

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

لینک به ارسال
در 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

لینک به ارسال

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

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

test.zip

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

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

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

test.zip

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

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

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

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

لینک به ارسال
  • 3 هفته بعد...
در در 5/14/2016 at 19:40، imanfakhar گفته است :

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

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

یه سوال

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

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

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

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

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

ویرایش شده توسط shayan
لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...