CodeCanyon
CodeCanyon
Code
Code
Code
Code
Code
Code

Flik - Timeline 10 Style with Generator

Flik - Timeline 10 Style with Generator

wp-version-available

You can create your own timeline for your personal website or portfolio. This timeline based on CSS3 and jQuery. This is very simple interface for editing.

Features :

  • Full responsive
  • 10 Style
  • 8 different scroll effect
  • Pure CSS3
  • Works with all CSS3 Browsers
  • Easy to implement, customize and style

Using :

mockup_01

Style_1
Style_2
Style_3
Style_4
Style_5

Styles

style_1
style_3

Animation Effects

Default effect

effect_default

Bounce effect

effect_bounce

Flip effect

flip

Version 1.4

29.07.2016
1. Fixed some bugs in generator
2. Fixed style4 json (added grouping)

Version 1.3

09.06.2016

1. Added GENERATOR page
2.Updated slider to responsive slider BxSlider
3.Added flikTimeline plugin $(’.myTimeline’).flikTimeline();
  • Properties
    • styleyou can change timeline style
    • effectyou can change timeline scroll effect
      All effects :
      • basic
      • bounce
      • slideRightLeft
      • slideLeftRight
      • flip
      • transformation
      • slideDownUp
      • slideUpDown
    • showDateshow or hide date in timeline
    • showTitleshow or hide title in timeline
    • loadingMessageshow loading message when timeline generating
    • delayif you want generate timeline after 6s ,you can use this property
      Example
      delay:6000
    • requestDatayou can get timeline data from anywhere ( data should be json )
                          
      requestData: {
          type: 'GET',
          url: 'json data url',
          data: '',
          onRequestDone: function (data) {
             console.log('onRequestDone')
          },
          onRequestFail: function (e) {
             console.log('onRequestFail');
          }
                              
    • dataFromSourceif you want load data from static json, you should use this property
    • accordionif you use timeline style9, you can use accordion effect
  • Events
    • init() If you want to init or reload timeline you can use init function
      
      var flik = $('.myTimeline').flikTimeline();
      flik.init()
      
    • setEffect(‘effect name’) If you want to change effect after create timeline,you can use like this
      
      var flik = $('.myTimeline').flikTimeline();
      flik.setEffect('effect name');
      
    • setDelay(delay time) If you want to change delay after create timeline,you can use like this
      
      var flik = $('.myTimeline').flikTimeline();
      flik.setDelay(delay time);
      
    • setLoadingMessage(your loading message) If you want to change loading message after create timeline,you can use like this
      
      var flik = $('.myTimeline').flikTimeline();
      flik.setLoadingMessage(your loading message);
      
    • setShowDate(true or false) If you want to change setShowDate after create timeline,you can use like this
      
      var flik = $('.myTimeline').flikTimeline();
      flik.setShowDate(true or false)
      
    • setShowTitle(true or false) If you want to change setShowTitle after create timeline,you can use like this
      
      var flik = $('.myTimeline').flikTimeline();
      flik.setShowTitle(true or false)
      

Version 1.2

03.05.2016

1. Added new style (style-10)

Version 1.1

25.04.2016

1. Added new style (style-9)
2. Added new 3 scroll effect
  • flip-effect
  • slide-up-down-effect
  • transformation-effect
3. Fixed some bugs

presentation


AFTER PURCHASES, PLEASE GIVE REVIEW AND RATE IT ? THANK YOU
by
by
by
by
by
by